Link to home
Start Free TrialLog in
Avatar of Heather Ritchey
Heather RitcheyFlag for United States of America

asked on

Change attribute title to data-title in link.

I've used css to style the tooltips on linkes here: https://www.searchcommander.com/ but as you can see by hover over the links in the very top menu in blue (sub-menu of the first link), after hovering for a few seconds, the default browser tooltip also shows up.  I found some info suggesting to change "title" to "data-title" in the links, but because this is a wordpress menu, I can't do that manually.

I found a couple jquery exmples that are supposed to do that, but nothing worked.

Anyone have any other ideas to try?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You could try something like this (although changing the source - 100% better solution)
<script>
$(function() {
  // FOR EACH ELEMENT WITH A 'title' ATTRIBUTE
  $('[title]').each(function() {
    // CREATE A data-title ATTRIBUTE WITH VALUE OF TITLE
    // AND CLEAR THE title ATTRIBUTE
    $(this).attr('data-title', $(this).attr('title')).attr('title','');
  });
});
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Heather Ritchey

ASKER

I tried that both in the head area and then tried at the end of the body, but it's still not changing it. I'm not showing any jquery errors in my browser either.
Thank you very much. There must be a problem with my firefox browser today. When I looked in chrome I do see it working. It's not in firefox for me yet.
Looking at the source for your page I see this
<script>
jQuery('[title]').each(function() {
    // CREATE A data-title ATTRIBUTE WITH VALUE OF TITLE
    // AND CLEAR THE title ATTRIBUTE
    jQuery(this).attr('data-title', jQuery(this).attr('title')).attr('title','');
  });    
</script>

Open in new window

You need to wrap this code in a document load so it should be this
<script>
jQuery(function() { // ON DOCUMENT REDY
  jQuery('[title]').each(function() {
    // CREATE A data-title ATTRIBUTE WITH VALUE OF TITLE
    // AND CLEAR THE title ATTRIBUTE
    jQuery(this).attr('data-title', jQuery(this).attr('title')).attr('title','');
  });    
});
</script>

Open in new window

Thank you very much.
You are welcome.