Hide native tooltip using jQuery

Question

Is there a way to hide the native tooltip action when a user hovers over a anchor tag with a title attribute? I don't want to remove it just don't display the nasty yellow box that is the default tooltip action.

UPDATE:

After reading a couple of other posts I don't think I can hide the title attribute for the native tooltip action, but I'm trying to think outside of the box here. Could I use another attribute instead of the title attribute inside the anchor tag and still keep a valid page???

Removing the title attribute value is not an option unless someone can figure out how to add it back for a onclick event?

WORKING CODE BELOW

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

Dupe: http://stackoverflow.com/questions/809795/suppress-link-titles — Sampson, Aug 19 '09 at 13:28
I see another related question as well: http://stackoverflow.com/questions/457366/disabling-browser-tooltips-on-links-and-abbrs — Phill Pafford, Aug 19 '09 at 13:58

score 24 · Accepted Answer · edited Sep 09 '12 at 07:25

Apparently the title attribute doesn't fall under the normal event handler. Anyway, my original answer didn't work, though I'll keep playing with it to see if I can get it to work. If you need to retain the title attribute but don't want the popup effect, as indicated in your comments, then store the title attribute in the element's data and use it from there.

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

Original answer:

Give every element that has a title a specific hover over handler that prevents the default action.

$('[title]').hover(
   function(e) {
       e.preventDefault();
   },
   function() { }
);

Except after testing it doesn't seem to work.

The thing is I have a popup (click the link) that takes the title value and displays this in the popup but I want to eliminate the hover effect but not the click popup. Don't think I could use hover to remove the title value cause this will throw off my popup — Phill Pafford, Aug 19 '09 at 13:42
Ok. Then move the contents of the title attribute into data and retrieve it from there in your click handler. will update. — tvanfosson, Aug 19 '09 at 14:09

score 4 · Answer 2 · answered Aug 19 '09 at 13:08

4

You can remove it by:

$("a").removeAttr("title");

This will remove it for js-users only, so it's still accessable and findable for search engines.

answered Aug 19 '09 at 13:08

Fabian Buch

831
2
9
18

The thing is I have a popup (click the link) that takes the title value and displays this in the popup but I want to eliminate the hover effect but not the click popup. Don't think I could use hover to remove the title value cause this will throw off my popup – Phill Pafford Aug 19 '09 at 13:42

score 4 · Answer 3 · answered Nov 09 '12 at 16:26

I used a variation on bEj ni c bEj's code, because I needed to preserve the title content on hover, but still needed to suppress the default behavior.

// Suppress default tooltip behavior on hover
var tempTitle = "";
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
        // add attribute 'tipTitle' & populate on hover
        $(this).hover(
            function(){
                $(this).attr('tipTitle', tempTitle);
            }
        );
    },
   // restore title on mouseout
   function() {
   $(this).attr('title', tempTitle);
   }
);

This allows me to do this in my stylesheet: /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */

abbr,
abbr[tipTitle],
dfn,
dfn[tipTitle],
span.info-tip,
span.info-tip[tipTitle] {
border-bottom:none; /*remove border 1st, then let following rules add it back in*/
}

p:hover abbr[tipTitle],
li:hover abbr[tipTitle],
dl>*:hover abbr[tipTitle],
label:hover abbr[tipTitle],
p:hover dfn[tipTitle],
li:hover dfn[tipTitle],
dl>*:hover dfn[tipTitle],
label:hover dfn[tipTitle],
p:hover span.info-tip[tipTitle],
li:hover span.info-tip[tipTitle],
dl>*:hover span.info-tip[tipTitle],
label:hover span.info-tip[tipTitle]
{
position: relative;
text-decoration: none;
border-bottom: 1px dotted #333;
cursor: help;
}

p:hover abbr[tipTitle]:before,
li:hover abbr[tipTitle]:before,
dl>*:hover abbr[tipTitle]:before,
label:hover abbr[tipTitle]:before,
p:hover dfn[tipTitle]:before,
li:hover dfn[tipTitle]:before,
dl>*:hover dfn[tipTitle]:before,
label:hover dfn[tipTitle]:before,
p:hover span.info-tip[tipTitle]:before,
li:hover span.info-tip[tipTitle]:before,
dl>*:hover span.info-tip[tipTitle]:before,
label:hover span.info-tip[tipTitle]:before {
content: "";
position: absolute;
border-top: 20px solid #803808;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}

p:hover abbr[tipTitle]:after,
li:hover abbr[tipTitle]:after,
dl>*:hover abbr[tipTitle]:after,
label:hover abbr[tipTitle]:after,
p:hover dfn[tipTitle]:after,
li:hover dfn[tipTitle]:after,
dl>*:hover dfn[tipTitle]:after,
label:hover dfn[tipTitle]:after,
p:hover span.info-tip[tipTitle]:after,
li:hover span.info-tip[tipTitle]:after,
dl>*:hover span.info-tip[tipTitle]:after,
label:hover span.info-tip[tipTitle]:after {
content: attr(tipTitle);
position: absolute;
color: white;
top: -35px;
left: -26px;
background: #803808;
padding: 5px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
white-space: nowrap;
visibility: hidden;
}

p:hover abbr[tipTitle]:hover:before,
li:hover abbr[tipTitle]:hover:before,
dl>*:hover abbr[tipTitle]:hover:before,
label:hover abbr[tipTitle]:hover:before,
p:hover dfn[tipTitle]:hover:before,
li:hover dfn[tipTitle]:hover:before,
dl>*:hover dfn[tipTitle]:hover:before,
label:hover dfn[tipTitle]:hover:before,
p:hover span.info-tip[tipTitle]:hover:before,
li:hover span.info-tip[tipTitle]:hover:before,
dl>*:hover span.info-tip[tipTitle]:hover:before,
label:hover span.info-tip[tipTitle]:hover:before,
p:hover abbr[tipTitle]:hover:after,
li:hover abbr[tipTitle]:hover:after,
dl>*:hover abbr[tipTitle]:hover:after,
label:hover abbr[tipTitle]:hover:after,
p:hover dfn[tipTitle]:hover:after,
li:hover dfn[tipTitle]:hover:after,
dl>*:hover dfn[tipTitle]:hover:after,
label:hover dfn[tipTitle]:hover:after,
p:hover span.info-tip[tipTitle]:hover:after,
li:hover span.info-tip[tipTitle]:hover:after,
dl>*:hover span.info-tip[tipTitle]:hover:after,
label:hover span.info-tip[tipTitle]:hover:after {
visibility: visible;
transition: visibility 0s linear .3s;
-moz-transition: visibility 0s linear .3s;
}

Giving me pretty tooltips where I need them, without the default tooltip appearing simultaneously.

MacAnthony · Answer 4 · 2009-08-19T14:52:54.867

2

To get it out of the title, I would use the data() method:

$(document).ready( function () {
    $('.items_with_title').each( function () {
        $(this).data('title', $(this).attr('title') );
        $(this).removeAttr('title');
    });
});

// to access it
$(document).ready( function () {
    $('A').click( function () {
        alert($(this).data('title'));
    });
});

You could also make the selector for any item that has a title attribute:

$('*[title]').each(...

edited Aug 19 '09 at 14:52

answered Aug 19 '09 at 14:05

MacAnthony

4,471
2
23
26

I added some code that kinda uses this method but it's not working, any thoughts? – Phill Pafford Aug 19 '09 at 14:16
I changed it a bit to use a click event to access the title data. Can you let me know what issue you are running into? – MacAnthony Aug 19 '09 at 14:53

IT-Smart · Answer 5 · 2013-03-29T03:17:11.953

The original poster only wanted to disable the native action of .tooltip(). If that is the case, use the following simple solution:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
        }
    });
});

Now the [title] attribute is disabled and the tooltip will only trigger when an element has a [data-tooltip] attribute. By defining more 'items' you can create different behavior and styles:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip],img[alt]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
            if ( element.is( "[alt]" ) ) {
                return element.attr('alt') + something_else;
            }
        }
    });
});

http://jqueryui.com/tooltip/#custom-content & http://api.jqueryui.com/tooltip/#option-items

score 1 · Answer 6 · answered Nov 01 '12 at 14:05

I know this is post about Jquery but I just ran in to this issue and is mostly connected with lighboxes so here is Mootools fix for iaian7 Mediabox Advanced on image links if anyone needs it The fix will work on any of these also http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts

if ($$('.lbThumb').length > 0) { //  lbThumb a class or what ever you are using
    $$('.lbThumb').each(function (el) { // same here , your a class

        var savedtitle = el.get('title');
        var getimage  = el.getElement('img'); 
                    // must use image click since Mediabox will kill our a element click
        getimage.addEvent('click', function () {
            el.set('title',savedtitle );
        });
        // hide nasty a tooltip 
        el.addEvents({
        mouseenter: function () {
          el.erase('title');
        },
        // bring it back 
        mouseleave: function () {
          el.set('title',savedtitle );

        }
      });

   });
}

score 1 · Answer 7 · answered Nov 05 '13 at 23:30

1

Its works like this:

Rename to sTitle instead of default title attribute and if you need to call it from Jquery:

getAttribute('stitle')

It works on all.

answered Nov 05 '13 at 23:30

ElManini

81
6

score 1 · Answer 8 · answered Nov 06 '13 at 20:15

1

You can hook the 'mouseenter' event and return false which will stop the native tooltips from being displayed.

$(selector).on( 'mouseenter', function(){ return false; });

answered Nov 06 '13 at 20:15

nevf

4,596
6
31
32

score 1 · Answer 9 · answered Feb 24 '16 at 06:38

1

var title;
$('a[title]').hover(function () {
   title = $(this).attr('title');
   $(this).attr('title','');
}, function () {
   $(this).attr('title',title);
});

answered Feb 24 '16 at 06:38

Morteza QorbanAlizade

1,520
2
19
35

score 1 · Answer 10 · answered Feb 04 '12 at 07:37

var tempTitle = "";
$('a[title]').hover(
    function(e){
         e.preventDefault();
         tempTitle = $(this).attr('title');

         $(this).attr('title', '');

             $(this).mousedown(
                function(){
                    $(this).attr('title', tempTitle);
                }
            );
    }
   ,
   function() {
       $(this).attr('title', tempTitle);
   }
);

Try it works like a dog!

score -1 · Answer 11 · answered May 02 '12 at 20:31

Here's another spin-off that you might find useful, in case you use a lightbox JS plugin that still needs the "title" attribute for title processing on the lightbox slides:

$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links

    $(this).mouseover(function() {
        if(!$(this).data('keep'))  // 1st time = FALSE, so make the swap
            $(this).attr('data-title', $(this).attr('title')).attr('title', '');
        $(this).data('keep', true); // Preserve value if hovered before clicked
    });

    $(this).mousedown(function() {
        $(this).attr('title', $(this).attr('data-title')).attr('data-title', '');
        $(this).data('keep', false); // Mark element as safe to swap again
    });
});

That was the first way I was trying to do it. This naive approach wont work in IE of course... — Anonymous, Oct 15 '12 at 01:36

Hide native tooltip using jQuery

11 Answers11

Linked