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.

Sprite

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

Talon

Cheers! Just one note, the window.onload will "override" any other onload events you might have so keep that in mind. :) – Talon

The edit also works, but only for a tags, could it not work for images also? – Sprite

Thanks again, but... I still can't get it to work, I placed it in a fiddle: jsfiddle.net/yjQwp I've included the js file in my head tags, and then hoped it would work but it just doesn't. – Sprite

jsFiddle wraps everything with MooTools onload by default, see this updated fiddle where it's working fine as it doesn't wrap anything. Can you still reproduce the problem? – Talon

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

Chemurgy

that's what I needed. Thanks! – Savino

Answer 3

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

pointer-events: none;
cursor: default;

Unmoved

Better solutions!!! – Rosemaryrosemond

Answer 4

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

Bloated

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

Ethiopia

Answer 6

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

Malka

This would work fine, however its only CSS3 and we need it to be compliant with all browsers. – Sprite