Is it possible to hide the title from a link with

问题:

I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window. In my case, it is not possible to do something like this,

$("a").attr("title", "");

Because of jQuery Mobile the title will reappear after certain events occur (basically everytime the anchor element gets redrawn). So I hope to hide the title via CSS.

Something like:

a[title] {
    display : none;
}

doesn't work, since it hides the entire anchor element. I want to hide the title only. Is this even possible? The popup shouldn't display.

回答1:

Using the following CSS property will ensure that the title attribute text does not appear upon hover:

pointer-events: none;

Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events.

回答2:

As per @boltClock's suggestion, I'll say I don't feel that a CSS solution is appropriate here, as the browser decides what to do with the title attribute of a link, or anything for that matter. CSS, to my knowledge, is unable to handle this issue.

As mentioned, using jQuery to replace the title with an empty string wont work because jQuery mobile rewrites them at some points. This, however, will work independently of JQM, and doesn't involve entirely removing the title attribute which is SEO important.

This works:

$('a["title"]').on('mouseenter', function(e){
    e.preventDefault();
});

I changed my initial code of $('body').on('mouseenter') to this after testing. This is confirmed to work.

回答3:

By CSS isn't possible since with CSS you can only adds contents to DOM (tipically with :before :after and content: '...';, not remove it or change attributes.

The only way is to create a live custom event (es. "change-something"):

$("a").on("change-something", function(event) { this.removeAttr("title"); });

and trigger to every changes:

... $("a").trigger("change-something");

More information and demo here:

http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/

回答4:

You can wrap your inner text in a span and give that an empty title attribute.

<a href="" title="Something" class=".some-tooltip-class"><span title="">Your text</span></a>

回答5:

try to change your code using this

$(document).ready(function() {
    $("a").removeAttr("title");
});

this will remove title attribute so the hint label won't be appear when hover on the link