Is it possible to hide the title from a link with CSS?

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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/

Answer 5

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

Answer 6

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

Answer 7

  $("#test").tooltip({title: false});

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

Answer 8

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;