如何隐藏链接的浏览器工具提示

发布于 2024-11-05 02:44:41 字数 2514 浏览 1 评论 0原文

大家好，我尝试制作自己的工具提示脚本，它使用 jQuery 跟随我的鼠标。一切都很好，但是当我将鼠标悬停在链接上并等待几秒钟时，浏览器使用标题作为自己的工具提示。我怎样才能阻止这个？

我寻找解决方案而不删除标题标签。

我的代码：

<html>
<head>
    <title>Tooltip</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mousemove("mouseover", function(e) {
                var x = e.clientX;
                var y = e.clientY-30;               
                var text = $(this).attr("title");
                var i = 0;
                for(i=0;i<1;i++) {
                    if(i=0) {
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    } else { 
                        $("div.tooltip").remove(); 
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    }
                }
            });
            $("a").mouseout(function() {
                $("div.tooltip").remove();
            });
        });
    </script>
    <style>
        body {
            top: 0px;
            left: 0px;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        div.tooltip {
            background-color: #123534;
            position: fixed;
            z-index: 2;
            padding: 5px;
            heigth: 30px;
        }
        div.menu {

            background-color: #666666;
            margin-left: 100px;
            margin-top: 100px;
            position: fixed;
            width: auto;
            z-index: 1;
        }
        ul {
            margin: 0;
            padding: 5px;
            list-style-type: none;
        }
        li {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li>
                <a href="#" title="test" >Link</a>
            </li>
            <li>
                <a href="#" title="asd" >Link</a>
            </li>
            <li>
                <a href="#" title="123" >Link</a>
            </li>
        </ul>

    </div>
</body>
</html>

如果有人知道如何优化我的脚本，我将非常感激；]

原文

Hi all I try to make my own tooltip script which follow my mouse with jQuery. Everything is okey but when I hover on link and wait few seconds browser use title for own tooltip. How I can stop this?!

I look for solution without removing of title tag.

My code:

<html>
<head>
    <title>Tooltip</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mousemove("mouseover", function(e) {
                var x = e.clientX;
                var y = e.clientY-30;               
                var text = $(this).attr("title");
                var i = 0;
                for(i=0;i<1;i++) {
                    if(i=0) {
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    } else { 
                        $("div.tooltip").remove(); 
                        $("body").append('<div class="tooltip" style="margin-top:'+y+'px; margin-left: '+x+'px;">'+text+'</div>');
                    }
                }
            });
            $("a").mouseout(function() {
                $("div.tooltip").remove();
            });
        });
    </script>
    <style>
        body {
            top: 0px;
            left: 0px;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        div.tooltip {
            background-color: #123534;
            position: fixed;
            z-index: 2;
            padding: 5px;
            heigth: 30px;
        }
        div.menu {

            background-color: #666666;
            margin-left: 100px;
            margin-top: 100px;
            position: fixed;
            width: auto;
            z-index: 1;
        }
        ul {
            margin: 0;
            padding: 5px;
            list-style-type: none;
        }
        li {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li>
                <a href="#" title="test" >Link</a>
            </li>
            <li>
                <a href="#" title="asd" >Link</a>
            </li>
            <li>
                <a href="#" title="123" >Link</a>
            </li>
        </ul>

    </div>
</body>
</html>

And If anyone knows how to optimize my script I'll be very thankful ;]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

§对你不离不弃 2024-11-12 02:44:41

这很简单。您只需将工具提示数据放置在另一个属性中即可。我使用 html5 规范并执行“data-tooltip”。

HTML：

<a href="#" data-tooltip="my link tooltip content">My Link</a>

JS：

var text = $(this).data("tooltip");

-- 或 --

如果出于某种原因您无法编辑标记，则可以通过编程方式进行编辑。您必须在将鼠标悬停在 document.ready 上之前执行此操作，如下所示：

$(document).ready(function() {

    $("a").each(function() { 

        var $this = $(this);

        $this
            .data("tooltip", $this.attr("title"))
            .removeAttr("title");

    });

});

然后，在您的 mousemove 中，正如我上面提到的，您将使用以下命令拉动它：

var text = $(this).data("tooltip");

It's very simple. You just need to place your tooltip data in another attribute. I use the html5 spec and do "data-tooltip".

HTML:

<a href="#" data-tooltip="my link tooltip content">My Link</a>

JS:

var text = $(this).data("tooltip");

-- OR --

If, for whatever reason you can't edit the markup, you could do it programatically. You would have to do it before the mouseover on document.ready like:

$(document).ready(function() {

    $("a").each(function() { 

        var $this = $(this);

        $this
            .data("tooltip", $this.attr("title"))
            .removeAttr("title");

    });

});

Then, in your mousemove, as I mentioned above, you would pull it with:

var text = $(this).data("tooltip");

回复收藏 0 原文

南巷近海 2024-11-12 02:44:41

在您的 mouseover 事件中，您可以 .attr('title', '') 删除标题..

然后在您的 mouseout 事件中，您可以 .attr('title', text) 因为您之前保存了标题。

回复收藏 0 原文

快乐很简单 2024-11-12 02:44:41

$("a.the_link").hover(
function () {
 $(this).data('title', $(this).attr('title'));
    $(this).removeAttr('title');
},
function () {
    $(this).attr('title', $(this).data('title'));
});

这是我见过的一个想法，我没有考虑过这个，因为我不需要它，但是当我看到它时我开始使用它。它会在悬停时删除链接，但在鼠标离开链接后将其返回。效果很好。

$("a.the_link").hover(
function () {
 $(this).data('title', $(this).attr('title'));
    $(this).removeAttr('title');
},
function () {
    $(this).attr('title', $(this).data('title'));
});

This is an idea I've seen, I din't thought about this because I didn't need it, but when I saw it I started using it. It removes the link on hover, but it returns it after mouse leaves the link. Works nicely.

回复收藏 0 原文

~没有更多了~