前端设置title的样式

css

        #titletips {
            position: absolute;
            border: 1px solid #333;
            background: #f7f5d1;
            padding: 1px;
            color: #333;
            display: none;
        }

html

<div id="Tstyle" title="设置Title样式">设置Title样式</div>

js

var x = 10;
var y = 20;
var newTitle = '';
$('#Tstyle').mouseover(function (e) {//指向Title所在的标签
    newTitle = this.title;
    this.title = '';
    $('body').append('<div id="titletips">' + newTitle + '</div>');
    $('#titletips').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
}).mouseout(function () {
    this.title = newTitle;
    $('#titletips').remove();
}).mousemove(function (e) {
    $('#titletips').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
})

如果是js动态添加的话，把js写成一个方法，在动态添加上数据后调用

jQuery示例

$("#Tstyle").html("设置Title样式");
$("#Tstyle").attr("title", "设置Title样式");
newTitle()
function newTitle() {
    var x = 10;
    var y = 20;
    var newTitle = '';
    $('#Tstyle').mouseover(function (e) {//指向Title所在的标签
        newTitle = this.title;
        this.title = '';
        $('body').append('<div id="titletips">' + newTitle + '</div>');
        $('#titletips').css({
            'left': (e.pageX + x + 'px'),
            'top': (e.pageY + y + 'px')
        }).show();
    }).mouseout(function () {
        this.title = newTitle;
        $('#titletips').remove();
    }).mousemove(function (e) {
        $('#titletips').css({
            'left': (e.pageX + x + 'px'),
            'top': (e.pageY + y + 'px')
        }).show();
    })
}