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: stackoverflow.com/questions/809795/suppress-link-titles — Sampson
– Sampson, Commented Aug 19, 2009 at 13:28
I see another related question as well: stackoverflow.com/questions/457366/… — Phill Pafford
– Phill Pafford, Commented Aug 19, 2009 at 13:58

liamzebedee · Accepted Answer · 2012-09-09 07:25:18Z

24

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.

edited Sep 9, 2012 at 7:25

liamzebedee

14.6k21 gold badges79 silver badges119 bronze badges

answered Aug 19, 2009 at 13:07

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phill Pafford Over a year ago

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

tvanfosson Over a year ago

Ok. Then move the contents of the title attribute into data and retrieve it from there in your click handler. will update.

Fabian Buch · Accepted Answer · 2009-08-19 13:08:10Z

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, 2009 at 13:08

Fabian Buch

8312 gold badges9 silver badges18 bronze badges

1 Comment

Phill Pafford Over a year ago

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

Chris · Accepted Answer · 2012-11-09 16:26:35Z

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 · Accepted Answer · 2009-08-19 14:52:54Z

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, 2009 at 14:52

answered Aug 19, 2009 at 14:05

MacAnthony

4,5212 gold badges25 silver badges27 bronze badges

2 Comments

Phill Pafford Over a year ago

I added some code that kinda uses this method but it's not working, any thoughts?

MacAnthony Over a year ago

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?

IT-Smart · Accepted Answer · 2013-03-29 03:17:11Z

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

bEj ni c bEj · Accepted Answer · 2012-02-04 07:37:23Z

1

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!

answered Feb 4, 2012 at 7:37

bEj ni c bEj

516 bronze badges

Comments

Benn · Accepted Answer · 2012-11-01 14:05:04Z

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

        }
      });

   });
}

ElManini · Accepted Answer · 2013-11-05 23:30:04Z

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 5, 2013 at 23:30

ElManini

1317 bronze badges

Comments

nevf · Accepted Answer · 2013-11-06 20:15:33Z

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 6, 2013 at 20:15

nevf

4,8366 gold badges34 silver badges35 bronze badges

Comments

Morteza QorbanAlizade · Accepted Answer · 2016-02-24 06:38:10Z

1

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

answered Feb 24, 2016 at 6:38

Morteza QorbanAlizade

1,5502 gold badges20 silver badges39 bronze badges

Comments

atwixtor · Accepted Answer · 2012-05-02 20:31:43Z

-1

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

answered May 2, 2012 at 20:31

atwixtor

80411 silver badges27 bronze badges

1 Comment

Anonymous Over a year ago

That was the first way I was trying to do it. This naive approach wont work in IE of course...

Collectives™ on Stack Overflow

Hide native tooltip using jQuery

11 Answers 11

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related