修改html中title属性的默认样式

默认的html的title属性的样式是这样的。
修改html中title属性的默认样式_第1张图片
通过编写JS函数来实现修改title属性的默认样式
效果如下:
修改html中title属性的默认样式_第2张图片
HTML部分:

<span class="mytooltip" title="个性样式个性样式个性样式个性样式个性样式" >
    格式样式:
span>

CSS部分:

 #mytitle {
        position: absolute;
        color: #ffffff;
        font-size: 14px;
        padding: 4px;
        background: rgba(40, 40, 40, 0.8);
        border-radius:5px;
        z-index:999;
    }

JS部分:

$(function () {
     
        var newtitle = '';
        $('span.mytooltip').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            if(newtitle != ''){
                $('body').append('
' + newtitle + '
'
); } $('#mytitle').css({ 'left': (e.pageX + 'px'), 'top': (e.pageY + 'px') }).show(); }).mouseout(function () { this.title = newtitle; $('#mytitle').remove(); }).mousemove(function (e) { $('#mytitle').css({ 'left': (e.pageX +10 + 'px'), 'top': (e.pageY +10+ 'px') }).show(); }) });

你可能感兴趣的:(title属性默认样式修改,HTML5,html5,jquery)