How jQuery can prevent showing HTML element title even if it has title attribute in its tag?

Question

I have a link like the below one, and I want to prevent showing it's title attribute on mouse over event. But I must keep it and I can not remove it.

<a href="" title="This is a test">Test</a>

How can I do it using jQuery ?

score 3 · Accepted Answer · answered Mar 10 '13 at 19:39

3

After many times, accidentally I found a link that solves the problem. So I decided to put it here ...
Thanks for its writer

http://jsfiddle.net/vkDcG/

HTML:

<a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="fancybox" caption="This is 2nd title" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

jQuery:

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        }
    });

answered Mar 10 '13 at 19:39

Mohammad Saberi

12,864
27
75
127

That's nice. Perhaps people should think in using something like data-caption instead of attribute "caption" that i think is not standard. data atributes are allowed in HTML5. – tomasofen May 05 '14 at 02:27
Nice work Mohammed. And I agree with @tomasofen, and I did try his suggestion. I simply changed "caption" to "data-caption" in the HTML. And in the JQuery, changed ('caption') to ('data-caption'). Worked like a charm and no more tooltips. – Lee Fuller Aug 22 '14 at 17:52

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

There are a few hacks on Stack Overflow (disable tooltip, suppress tooltip). I think this is the cleanest and it doesn't need jQuery:

https://stackoverflow.com/a/457382/1325290

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}

Leave out the if...suppress part if you don't want it.

edited May 23 '17 at 12:14

Community

1
1

answered May 19 '12 at 20:32

Tina CG Hoehr

6,721
6
44
57

This function worked, but removed title from the link. The problem I have is that I'm using Fancybox. I need to show titles beside the opened thumbnail, but I don't like to see any title when mouseover event is occurred. – Mohammad Saberi May 20 '12 at 11:07
Can you try re-adding title with `links[i].onclick = function() {this.title = this._title;}` ? So that right before the thumbnail opens the title is there? Alternatively you might get it to work with jQuery data as shown in this answer http://stackoverflow.com/a/7296899/1325290 – Tina CG Hoehr May 20 '12 at 14:12
This approach is outdated - please see my reply below for a better way to do this with modern jQuery, which also works for elements created/loaded after the code is run. – mindplay.dk Jan 20 '13 at 16:24

Dmitry · Answer 3 · 2012-05-19T20:40:27.420

0

The only idea I have - is prevent mouseover event form being trigger. Posiibly this solution will work:

$("a[title='Titlte is a test']").mouseover(function(e) {
    e.preventDefault();
});

If this will not help you then you can hack this with some opacity element placed over you a element - this actually will do the same - mouseover evenet wouldn't be tiggered. Note: you shoukd trigger click event on link when it will be catcjed on opacity element:

$("Opacity element id").click(function(e) {
    $("a[title='Titlte is a test']").click()
});

And similarly with mousedown/up events if they are used

edited May 19 '12 at 20:40

answered May 19 '12 at 20:33

Dmitry

1,263
11
15

which might be a security issue: not all browsers allow a redirect of `click` events on all tags :) – May 19 '12 at 20:35
@Andreas,Never encounter this issue. Actually I know nothing about such secure problem. What are they intended for? If you word are right then we shouldn't use any jQuery triggering possibility'es as they are potentially not save – Dmitry May 19 '12 at 20:38
I attempted preventDefault() in Chrome, and it does not seem to suppress tooltips - I think tooltips are generated by browser-internal events/handlers that are not exposed to JavaScript... – mindplay.dk Jan 20 '13 at 16:22

score 0 · Answer 4 · answered May 19 '12 at 20:36

The technique is to hide the title on mouseove and restore in on mouseout.

$("a#test").mouseover( function(e){

    var myLink = $('a#test');

    myLink.hover(
        function() {  
            old_title = $(this).attr('title');      
            $(this).attr('title',''); 
        },
        function() {  
            $(this).attr('title', old_title);  
        }  
    );  
});

score 0 · Answer 5 · answered Jan 20 '13 at 16:20

Here's my solution using modern jQuery:

jQuery(document.body)
  .on('mouseover', 'a[title]', null, function(event) {
    $(this).attr('data-title', $(this).attr('title')).removeAttr('title');
  })
  .on('mouseout', 'a[data-title]', null, function(event) {
    $(this).attr('title', $(this).attr('data-title')).removeAttr('data-title');
  });

This handles all existing and future a-tags on the page, and causes very minimal memory-overhead, because it creates only a single pair of event-handlers for all elements - on hover, it moves the value from the title attribute to a data-title attribute, which it removes again when the mouse leaves the element.

score 0 · Answer 6 · answered May 13 '15 at 10:40

0

For me, I didn't care what the content of the title tag was so this was cleaner for me. I just did:

$('a').hover(function() {

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

});

Which stopped the title tag from showing.

answered May 13 '15 at 10:40

Jack

3,271
11
48
57

How jQuery can prevent showing HTML element title even if it has title attribute in its tag?

6 Answers6