Disable tooltips using css

Question

Is there a way to disable the tooltips of the <a> tag in css?

Answer 1

I don't know what is your reason for wanting to disable tool-tips but I've run into the same problem myself.

I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.

I used a bit of jQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.

Following is a DIV with some "Title" content:

<div class="tooltip-class" title="This is some information for our tooltip.">
  This is a test
</div>

Now, you will have to run the following jQuery to hide the Title tag on mouse hover:

$(document).ready(function(){
  $(".tooltip-class").hover(function(){
    $(this).attr("tooltip-data", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("tooltip-data"));
    $(this).removeAttr("tooltip-data");
  });
});

Note that this jQuery code was tested in an environment with jQuery Version 1.6.4.

Following is a link to the full example:

http://jsfiddle.net/eliasb/emG6E/54/

Answer 2

I know this is an old question, but in the meantime this has become possible via CSS like this:

pointer-events: none;

Note however that this also disabled the clicking ability! It was what I needed, but may not be the case for the OP.

cfr https://developer.mozilla.org/en/docs/Web/CSS/pointer-events