Title提示样式修改 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery跟随提示信息</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#tooltip{
    position:absolute;
   padding-left: 10px;
   padding-right: 10px;
    background:#3499da;  
    color:#fff;
    display:none;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
}</style>
</head>
<body>
<ul>
    <li><a href="###1" class="tooltip" title="[活动]春鞋迎春大促">[活动]春鞋迎春大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]秋冬服装大促">[活动]秋冬服装大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]床品大促">[活动]床品大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]家电大促">[活动]家电大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]百货促销">[活动]百货促销</a>
    </li>
</ul>

<script>
var x = 10;
var y = -20;
var newtitle = '';
$('a.tooltip').mouseover(function(e) {
    newtitle = this.title;
    this.title = '';
    $('body').append('<div id="tooltip">' + newtitle + '</div>');
    $('#tooltip').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
}).mouseout(function() {
    this.title = newtitle;
    $('#tooltip').remove();
}).mousemove(function(e) {
    $('#tooltip').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
})
</script>

</body>
</html>

 

posted @ 2018-05-12 10:15  Jinsuo  阅读(1682)  评论(0)    收藏  举报