html5 tootip

图片
code
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
       /*修改提示框*/
        #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;
        }
    </style>
</head>
<body>
    <p>hahahhaha</p>
<span class="mytooltip" title="个性样式" >
    格式样式:
</span>
<script type="text/javascript">
$(function () {
        var x = 10;
        var y = 20;
        var newtitle = '';
        $('span.mytooltip').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            $('body').append('<div id="mytitle" >' + newtitle + '</div>');
            $('#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();
        })
    });
</script>
</body>
</html>

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 

posted @ 2020-08-19 17:46  anobscureretreat  阅读(354)  评论(0)  编辑  收藏  举报