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" />