I'm trying to add an attribute to an element with jQuery; since my markup is created on-the-fly I can't directly add the attribute. Why is the below script not adding the attribute? Why is this fiddle not functioning as desired? Here is the fiddle I am trying to get working with some sample markup included.

// set the tooltip content
jQuery('li#menu-item-75 a:hover:before').prop('tooltipText', 'w00t');
jQuery('li#menu-item-75 a:hover:after').prop('tooltipText', 'w00t');

I'm trying to add an attribute to an element with jQuery; since my markup is created on-the-fly I can't directly add the attribute. Why is the below script not adding the attribute? Why is this fiddle not functioning as desired? Here is the fiddle I am trying to get working with some sample markup included.

// set the tooltip content
jQuery('li#menu-item-75 a:hover:before').prop('tooltipText', 'w00t');
jQuery('li#menu-item-75 a:hover:after').prop('tooltipText', 'w00t');

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 31, 2013 at 23:56 Jim22150 asked Jan 31, 2013 at 23:45 Jim22150Jim22150 51122 gold badges88 silver badges2222 bronze badges 3

• 1 You forgot to select jQuery on your JSFiddle... – Hanlet Escaño Commented Jan 31, 2013 at 23:51
• Thanks, fixed. That's not what the problem was though. – Jim22150 Commented Jan 31, 2013 at 23:57
• 1 Glad you could fix it :) – Hanlet Escaño Commented Jan 31, 2013 at 23:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You'll have to set the data attribute with .attr() in order for the DOM attribute to actually be affected:

jQuery('li#menu-item-75 a').attr('data-tooltip', 'w00t');

:hover and :before/:after don't work with jQuery selectors.

Demo: http://jsfiddle/fkdh8/13/