默认的html的title属性的样式是这样的。
通过编写JS函数来实现修改title属性的默认样式
效果如下:
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('<div id="mytitle" >' + newtitle + '</div>');
}
$('#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();
})
});