Hiding title tags on hover

Question

I've looked through previous questions and none of them have really worked for me, i've checked google to and the information I found seems pretty vague, so I thought i'd try here.

Is anyone aware/or have tackle the problem of title tags displaying on hover. I have a series of links and images that will be assigned title tags, however, some of them will be displaying information that would be better off not popping up on hover.

Is there a global function I could use to apply this to all manner of title tags? An example would be as follows:

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

If possible I would like to disable the title "services from cars" appearing on hover.

Thanks again.

Answer 1

This should work just fine to disable single title:

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

If you need the title afterwards, 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 way is not generic though.. to have it applied to all the anchors, have 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 case.

Edit: to apply same for more tags (e.g. <img>) first move the core of the code to a 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 reasoning for using the 'title' tag is for Aria compliance, use aria-label instead.

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

Answer 3

Try setting two titles, an empty one that will be picked by the browser as tooltip and then the one you need:

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

Answer 4

You can't disable them because Its a generic part of browsers / html specification. But i am aware that you can style them using css and javascript, so a display:none properly should be able to 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 on the container of the image (the div or a):

pointer-events: none;
cursor: default;