Disable tooltips using css

Question

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

Answer 1

$(.classname).attr("title","");

using attribute will search the title and replaces with ""(empty). Try this and tool tip will not be show when you hover.

Answer 2

Unfortunately there is no pure CSS solution. If anyone looking for a DOM only solution (without jQuery)

document.querySelectorAll('a[href]').forEach(el => {
  el.setAttribute('data-title-cache', el.textContent.trim() || el.getAttribute('href'));
  el.setAttribute('title', el.getAttribute('data-title-cache'));
  el.addEventListener('mouseenter', (e) => {
    el.setAttribute('title', '');
  });
  el.addEventListener('mouseleave', (e) => {
    el.setAttribute('title', el.getAttribute('data-title-cache'));
  });
});

<a href="/link/to/some/thing"> This is a link </a>

You just have to paste this code. The script sets the title from the text content or the href found in the a tag. Then removes the title attribute on mouse hover. So that the default browser tooltip would not be displayed on hover.

The link in the code snippet has a title but the tooltip won't be displayed on hover. (Inspect and check)

Answer 3

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

Answer 4

I'm afraid that just isn't feasible. You can, however, use Javascript to strip out a link's title which may allow you to do what you want:

document.getElementById('aid').title = "";

should do the trick.

Answer 5

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 6

<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


$(function(){

    $('*').tooltip({ track: true });

    $('*[title]').tooltip('disable');

});