jQuery a标签自定义title

最新推荐文章于 2023-06-11 12:20:50 发布

汤永红

最新推荐文章于 2023-06-11 12:20:50 发布

阅读量1k

点赞数 1

文章标签： js jQuery

本文链接：https://blog.csdn.net/mtm001/article/details/107523826

版权

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        #tooltip {
            border: 1px solid red;
            background: #FF6;
            position: absolute;
            padding: 1px;
            color: #333;
            display: none;
        }
    </style><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

<div id="link">
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a>
    </p>
    <p>
        <a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a>
    </p>
    <p>
        <a href="#" title="这是我的超链接提示1">自带提示1</a>
    </p>
    <p>
        <a href="#" title="这是我的超链接提示2">自带提示2</a>
    </p>
</div>
<script type="text/javascript">
    $(function() {
        var x = 10;
        var y = 20;
        $("a.tooltip").mouseover(function(e) {
            this.myTitle = this.title;
            this.title = "";
            var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
            $("#link").append(tooltip); //追加到文档中
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show(); //设置X  Y坐标， 并且显示
        }).mouseout(function() {
            this.title = this.myTitle;
            $("#tooltip").remove(); //移除
        }).mousemove(function(e) {
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        })
    })
</script>
</body>

</html>

汤永红

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery a标签自定义title

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> #tooltip { border: 1px solid red; background: #FF6; positio.
复制链接

扫一扫