CODEWITHSUNDEEP
jquerybrowsertooltiphide
user546774
user546774

Reputation:

How to hide browser tooltip for links

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

Upvotes: 4

Views: 9394

Answers (3)

Nemanja
Nemanja

Reputation: 594

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

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

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

Upvotes: 3

jrn.ak
jrn.ak

Reputation: 36619

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.

Upvotes: 2

Related Questions