Hover title tags on hover

Question

I looked through the previous questions and none of them really worked for me, I checked google and the information found seems pretty vague, so I thought I would try it here.

Does anyone know / or solve the problem of displaying title tags on hover. I have a number of links and images to which title tags will be assigned, however, some of them will display information that did not appear better on hover.

Is there a global function that I could use to apply to all header tags? An example would be the following:

<a href="service.php" title="services for cars" /> 

If possible, I would like to disable the “services from cars” header that appears when you hover over it.

Thanks again.

Answer 1

This should work fine to disable a separate header:

 <a href="service.php" title="services for cars" onmouseover="this.title='';" /> 

If you need a name after this, you can restore it:

 <a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" /> 

This method is not general, though .. to apply it to all anchors, there is such JavaScript code:

 window.onload = function() { var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { var link = links[i]; link.onmouseover = function() { this.setAttribute("org_title", this.title); this.title = ""; }; link.onmouseout = function() { this.title = this.getAttribute("org_title"); }; } }; 

Live test .

Edit: apply the same thing to other tags (e.g. <img> ) first move the code core to the function:

 function DisableToolTip(elements) { for (var i = 0; i < elements.length; i++) { var element = elements[i]; element.onmouseover = function() { this.setAttribute("org_title", this.title); this.title = ""; }; element.onmouseout = function() { this.title = this.getAttribute("org_title"); }; } } 

Then change the code to:

 window.onload = function() { var links = document.getElementsByTagName("a"); DisableToolTip(links); var images = document.getElementsByTagName("img"); DisableToolTip(images); }; 

Answer 2

If your argument for using the 'title' tag is for Aria, use aria-label instead.

 <a href="service.php" aria-label="services for cars" /> 

Answer 3

Try setting two headers, blank, that the browser will select as a tooltip, and then the one you need:

  <a href="service.php" title="" title="services for cars" /> 

Answer 4

You cannot disable them, because this is a common part of the / html browser specification. But I know that you can style them with css and javascript, so that display: none of them should be used somewhere.

look here

Answer 5

Although this has already been answered in standard JS.

Here is a jQuery solution.

 $('a').hover( function() { $(this).attr("org_title", $(this).attr('title')); $(this).attr('title', ''); }, function() { $(this).attr('title', $(this).attr("org_title")); } ); 

Answer 6

A simple alternative is to use CSS in the image container (div or a):

 pointer-events: none; cursor: default;