默认的title不能设置样式,通过js和css实现title的功能
css样式:
/*修改提示框*/
#mytitle {
position: absolute;
color: #ffffff;
max-width: 160px;
font-size: 14px;
padding: 4px;
background: rgba(40, 40, 40, 0.8);
border: solid 1px #e9f7f6;
border-radius:5px;
}
html代码:
格式样式:
js代码:
$(function () {
var x = 10;
var y = 20;
var newtitle = '';
$('span.mytooltip').mouseover(function (e) {
newtitle = this.title;
this.title = '';
$('body').append('
' + newtitle + '');
$('#mytitle').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y - 80 + 'px')
}).show();
}).mouseout(function () {
this.title = newtitle;
$('#mytitle').remove();
}).mousemove(function (e) {
$('#mytitle').css({
'left': (e.pageX + x +10 + 'px'),
'top': (e.pageY + y - 60 + 'px')
}).show();
})
});