Disable tooltips using css

Question

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

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

 This is a link 

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)