CODEWITHSUNDEEP
htmlcsshideanchortitle
jtepe
jtepe

Reputation: 3350

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

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.

Upvotes: 39

Views: 97622

Answers (9)

Jose
Jose

Reputation: 322

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

Upvotes: 0

Circle
Circle

Reputation: 1

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;

Upvotes: 0

Hiren Sojitra
Hiren Sojitra

Reputation: 1

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

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

Upvotes: 0

hugsbrugs
hugsbrugs

Reputation: 3611

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

Upvotes: 0

Arjan Frans
Arjan Frans

Reputation: 491

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>

Upvotes: 16

g.annunziata
g.annunziata

Reputation: 3266

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/

Upvotes: 2

Todd
Todd

Reputation: 5454

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.

Upvotes: 12

Blake Frederick
Blake Frederick

Reputation: 1670

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.

Upvotes: 32

mustafa-elhelbawy
mustafa-elhelbawy

Reputation: 530

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

Upvotes: 2

Related Questions