39

I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window. In my case, it is not possible to do something like this,

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

Because of jQuery Mobile the title will reappear after certain events occur (basically everytime the anchor element gets redrawn). So I hope to hide the title via CSS.

Something like:

a[title] {
    display : none;
}

doesn't work, since it hides the entire anchor element. I want to hide the title only. Is this even possible? The popup shouldn't display.

12
  • 1
    no, you can't hide the tooltips. that's not part of the css spec.
    – Marc B
    Commented Mar 12, 2013 at 14:32
  • possible duplicate of How to disable tooltip in the browser with jQuery?
    – andyb
    Commented Mar 12, 2013 at 14:33
  • That's too bad. I will have to find something else then.
    – jtepe
    Commented Mar 12, 2013 at 14:34
  • @Gatekeeper It's a tooltip which is created by jQuery Mobile, so I'm pretty much stuck with it. I just want it to hide :)
    – jtepe
    Commented Mar 12, 2013 at 14:44
  • 1
    Another idea (much less elegant than what you're looking for, but gets the job done): You could change the behavior of jQuery Mobile. I wouldn't directly change the source (not generally good practice), but you could write an extension that hooks in and removes the title after it renders the elements. Commented Mar 12, 2013 at 14:49

9 Answers 9

32

Using the following CSS property will ensure that the title attribute text does not appear upon hover:

pointer-events: none;

Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events.

3
  • 22
    This will also disable any functions following clicking on the link. Which renders the whole link pointless. Commented Jul 4, 2017 at 15:41
  • 3
    Yes @Hafenkranich, that's why in my answer I wrote "Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events." Commented Jul 5, 2017 at 20:14
  • In Safari the title keeps showing up, even with pointer-events: none Commented May 15, 2023 at 8:46
15

You can wrap your inner text in a span and give that an empty title attribute.

<a href="" title="Something">
  <span title="">Your text</span>
</a>

5
  • 10
    SEO is gonna love this
    – qwertzman
    Commented Jul 18, 2016 at 14:34
  • 1
    this would be a nice solution, unfortunately doesn't work for all browsers (eg. Safari shows the tooltip by using the parent title if the title of the target element is empty)
    – guari
    Commented Aug 2, 2016 at 13:25
  • If you're going mangle an accessibility feature like that you're better off simply not using it in the first place. Commented Mar 16, 2018 at 16:44
  • This turned out to be the only viable solution in a managed environment like MediaWiki.
    – jramm
    Commented Aug 25, 2019 at 13:23
  • Danng, very clever.
    – Todd
    Commented Sep 14, 2020 at 23:14
12

As per @boltClock's suggestion, I'll say I don't feel that a CSS solution is appropriate here, as the browser decides what to do with the title attribute of a link, or anything for that matter. CSS, to my knowledge, is unable to handle this issue.

As mentioned, using jQuery to replace the title with an empty string wont work because jQuery mobile rewrites them at some points. This, however, will work independently of JQM, and doesn't involve entirely removing the title attribute which is SEO important.

This works:

$('a["title"]').on('mouseenter', function(e){
    e.preventDefault();
});

I changed my initial code of $('body').on('mouseenter') to this after testing. This is confirmed to work.

5
  • Moving my comment from the other answer to here: this doesn't look like CSS to me.
    – BoltClock
    Commented Mar 27, 2013 at 6:02
  • 2
    well, @BoltClock, that's because it isn't. the OP only said that something like the jquery script HE/SHE included wouldn't work. Because he's using jquery mobile, I'm rightfully assuming that jquery is being used for his project, and that a jquery answer (that works) would be fair game.
    – Todd
    Commented Mar 27, 2013 at 6:14
  • if jquery can't handle an event, css sure as heckfire cannot either.
    – Todd
    Commented Mar 27, 2013 at 6:15
  • 2
    Yes, I'm saying you need to mention that it isn't (possible with) CSS because the question specifically asked to do it via CSS, not jQuery.
    – BoltClock
    Commented Mar 27, 2013 at 6:19
  • 3
    This doesn't work (anymore), at least not with the latest jQuery.
    – hon2a
    Commented Jul 17, 2017 at 8:56
2

try to change your code using this

$(document).ready(function() {
    $("a").removeAttr("title");
});

this will remove title attribute so the hint label won't be appear when hover on the link

1
  • 2
    SEO and hidden/removed content
    – qwertzman
    Commented Jul 18, 2016 at 14:35
2

In CSS it's not possible, because you can only add contents to DOM (tipically with :before :after and content: '...';, not remove or change attributes.

The only way is to create a live custom event (es. "change-something"):

$("a").on("change-something", function(event) { this.removeAttr("title"); });

and trigger to every changes:

... $("a").trigger("change-something");

More information and demo here:

http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/

0
0

Full working pure javascript solution

var anchors = document.querySelectorAll('a[title]');
    for (let i = anchors.length - 1; i >= 0; i--) {
    anchors[i].addEventListener('mouseenter', function(e){
        anchors[i].setAttribute('data-title', anchors[i].title);
        anchors[i].removeAttribute('title');
        
    });
    anchors[i].addEventListener('mouseleave', function(e){
        anchors[i].title = anchors[i].getAttribute('data-title');
        anchors[i].removeAttribute('data-title');
    });
}
0
  $("#test").tooltip({title: false});

There title attribute default value is true, make it false. This will work only in case of Bootstrap Tooltip

0
const config = {
  attributes: true,
  childList: true,
  subtree: true,
  attributeFilter: ['title'],
};
const removeTitleAttribute = (element, observer) => {
  if (element.hasAttribute('title')) {
    element.removeAttribute('title');
  }
};
const removeTitleByObserveDOM = () => {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach((node: HTMLElement) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            const components = node.querySelectorAll('[title]');
            components.forEach(component => removeTitleAttribute(component, observer));
          }
        });
      } else if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
        removeTitleAttribute(mutation.target, observer);
      }
    });
  });

  observer.observe(document.querySelector('#root'), config);
  return observer;
};
export default removeTitleByObserveDOM;
1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Apr 16, 2023 at 4:20
0

Pure JavaScript solution that removes all the tooltips, doesn't need jQuery, keeps the possibility to click on the link, and preserves the accessibility by adding an aria-label instead of the title attribute:

function hide_title_attributes(el){
  var t = el.querySelectorAll('[title]');
  if(t && t.length > `enter code here`0){
    for(var n=0;n<t.length;++n){
      var title=t[n].title;
        t[n].removeAttribute('title');
        t[n].setAttribute('aria-label',title);
      }
    }
}
hide_title_attributes(document.body);
document.body.onmouseover = function(e){
  if(e.target.innerHTML.indexOf('title=')>-1){
    hide_title_attributes(e.target);   
  }
  else if(e.target.title){
    var t=e.target.title;
      e.target.removeAttribute('title');
      e.target.setAttribute('aria-label',t);     
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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