How to hide browser tooltip for links

Question

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 ;]

possible duplicate of [jQuery: How to disable tooltip](http://stackoverflow.com/questions/1027762/jquery-how-to-disable-tooltip) — drudge, May 06 '11 at 00:30

score 3 · Accepted Answer · answered May 06 '11 at 00:52

3

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");

answered May 06 '11 at 00:52

Code Maverick

20,171
12
62
114

yes, now my script remove the "title" attribute and make own attribute for mouseover event. On mouseout my attribute will be removed by "title" attribute. Thanks for the post and U'll win the tick for correct answer, because I use the same method :) Cheers :) – May 06 '11 at 13:10
awesome. was just looking for this. data-tooltip="my link tooltip content" < i am not using jquery but i am showing my own tooltip via css from the title attribute and then the browser also displays it so i have redundancy. works like a charm if i use data-tooltip instead of title. thnx a lot <3 – b0x0rz Nov 05 '11 at 22:27

score 2 · Answer 2 · answered May 06 '11 at 00:24

2

In your mouseover event, you could .attr('title', '') to remove the title..

and then in your mouseout event, you could .attr('title', text) since you saved the title earlier on.

answered May 06 '11 at 00:24

drudge

35,471
7
34
45

In my post "I look for solution without removing of title tag." – May 06 '11 at 00:26
@T0m3kk: I don't think that's possible. – drudge May 06 '11 at 00:29

score 1 · Answer 3 · answered Jun 13 '12 at 20:25

$("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.

How to hide browser tooltip for links

3 Answers3