CODEWITHSUNDEEP
jqueryattributestitle
Mohammad Saberi
Mohammad Saberi

Reputation: 13166

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

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 ?

Upvotes: 2

Views: 4789

Answers (6)

Jack
Jack

Reputation: 3405

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.

Upvotes: 0

Mohammad Saberi
Mohammad Saberi

Reputation: 13166

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

Upvotes: 3

mindplay.dk
mindplay.dk

Reputation: 7340

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.

Upvotes: 0

Dmitry
Dmitry

Reputation: 1283

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

Upvotes: 0

Joseph Ledesma Gabito
Joseph Ledesma Gabito

Reputation: 361

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

Upvotes: 0

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

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.

Upvotes: 1

Related Questions