Where to edit the <abbr> tags for the Acronym Expansion feature?

[phatmass]

The "Acronym Expansion" feature is used a lot on my forum, but unfortunately, it is not mobile friendly and works differently on different browsers. The Acronym Expansion feature seems to generate the acronym into <abbr> tags when it renders the post.

I found some jQuery and CSS that will easily turn the <abbr></abbr> tags into a tooltip that is mobile friendly, but it requires that I add rel="tooltip" to the tag.

I don't know what file to edit to make this change.  Can anyone help?

[Xae]

I don't know what file to edit to make this change.  Can anyone help?

Why does the jQuery and CSS require adding the rel attribute? If you're adding custom code, it's easier to modify it rather than editing the IPS4 source. Have you got a link?

[Nathan Explosion]

Throw up a link to the jquery/css you've found - might have options to target the <abbr> tag instead of targeting the rel="tooltip".

[phatmass]

Here's what I'm trying to implement:

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

And the demo:

http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/

 

[Nathan Explosion]

Ok - so do you want to target all <abbr> tags then?

If so, then the line of interest in the JS code is this one:

var targets = $( '[rel~=tooltip]' )

Change that to:

var targets = $( 'abbr' )

That should remove the need to add the rel="tooltip"

[Xae]

Hah, the forum ate my post. Hit submit and got a 503.

Yeah, Nate's changes will do it.

[phatmass]

That does not seem to do the trick.

http://www.phatmass.com/phorum/topic/138151-commonly-used-acronyms-or-terms-used-on-phatmass/

Update: It works! I had to change the z-index attribute in the CSS. The pop-ups were going behind the posts and I couldn't see them. Thanks!!!

 

It works awesome on phones too. Thanks again guys!

[Nathan Explosion]

Nice!