23

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

3
  • 2
    You can't disable tool-tip in CSS. But if you don't want tool-tip, then you should avoid writing title attribute of <a> tag.
    – Ketan Modi
    Apr 23, 2011 at 4:58
  • Don't forget that the title tag exists for accessibility reasons as well. That said, not having one as @Ronak mentions, will do what you want.
    – Cthos
    Apr 23, 2011 at 5:02
  • Removing the title attribute also has SEO implications. Sep 24, 2015 at 2:06

12 Answers 12

15

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/

1
  • 1
    I like this trick the most because here the titles are preserved!
    – mtness
    May 4, 2017 at 10:42
15

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

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

});
3

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>
1

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', '');
});
1

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)

0

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.

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

2
  • Perhaps the real solution is not to write at title in the first place. You should add this to your answer. Your solution is fine if the user does not have control over the html content however. Sep 1, 2014 at 13:43
  • @PabloKarlsson Leaving the title attribute out has negative SEO and usability implications. Sep 24, 2015 at 2:06
0

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

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>

-1
$('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);
})
-4

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.

3
  • 3
    .title is a DOM element property, and not a jQuery property. This code doesn't work. Dec 20, 2015 at 12:48
  • 1
    This simply doesn't work, like @Ronen Cypis stated. It baffles me that a wrong answer gets accepted without OP even trying it out Nov 15, 2016 at 0:09
  • 1
    The idea is to HIDE the title, not remove it. It can't be done, I'm sorry to say. If title is present, a tooltip will show.
    – dev
    Apr 19, 2018 at 8:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.