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

Answer 3

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

});

Answer 4

It is not a solution using CSS but sometimes may help and i used this as a workaround: add "title" attribute as being empty in the tag or whichever tag you wanna see no titles popping up. Keep in mind that it will ruin the readability of the page for people who are blind or have some defects in their visual senses.

Example:

<div title>This will have no title popping up, even if parent tag is setting a title</div>

Answer 5

You can make it so that the title attribute is removed exclusively on hover, and then re-added. This makes it so that your SEO remains identical, but there is no tooltip text when hovering.

$('a[title]').on('mouseenter', function () {
   var $this = $(this);
   $this.attr('title-cache', $this.attr('title'));
   $this.attr('title', '');
});

$('a[title]').on('mouseleave', function () {
   var $this = $(this);
   $this.attr('title', $this.attr('title-cache'));
   $this.attr('title-cache', '');
});

Answer 6

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 7

$(.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 8

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 9

for me the answer came using jQuery. By having an empty string (" ") to set the attribute "title" on the jQuery script, the tooltip disappeared while doing the hover over the div.

HTML:

<div title="Text in tooltip." class="tooltip-class"> This is a test </div>

jQuery:

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

Answer 10

It depends on why you need the title attribute.

If you need it for screen readers but don't want a tooltip when you hover, you can use

<a href="gosomewhere.com" aria-Label="This is a link to gosomewhere.com">Test</a>

Answer 11

$('a[title]').each(function (index, el) {
    var $tooltip = $('<div class="overlay-' + index + '" />')
                         .css({
                            position: "absolute"
                            , background: "url('../Images/space.gif')"
                            , width: $(el).width()
                            , height: $(el).height()
                            , top: 0
                            , left: 0
                            , zIndex: 300
                            , border: "1px solid red"
                         })
                         .on('click', function (event) {
                             $(el).click();
                         });
    $(this).after($tooltip);
})

Answer 12

Just paste this code at the bottom of your <body> tag in a <script>.

This code uses jQuery:

$('.titleHidden').removeAttr('title');

Then you need to add the CSS class titleHidden to each a tag when you want to hide its tooltip.