jQuery Tooltips in WordPress

[daclements]

I’m trying to get Chris’ [jQuery Tooltips](https://css-tricks.com/bubble-point-tooltips-with-css3-jquery/ “jQuery Tooltips”) to work on WordPress, but I’m not having much joy. Here’s what I did:

I put the tooltips.js in my theme’s js folder and enqueued the script the wp_enqueue_script. The script is correctly called in the head of the document.

WordPress already loads jQuery (v 1.8.3) and I confirmed that it works with the script by taking the demo file and changing the version from 1.7.0 to 1.8.3 and it still worked.

I added the five lines of JS to the head of the document by using the wp_head filter. It shows up correctly in the head of the document. I also changed #page-wrap to #page to match my theme’s CSS.

I copied the CSS in tooltip.css to my theme’s stylesheet and confirmed that my browser was loading the updated version of the file, with the .tooltip styling.

Then I’ve created a link and entered the title in the a tag, but the generic browser title comes up, not the fancy one. I’m pulling my hair out here.

It seems to be a JS issue of some kind – when I view Chris’ example, it adds the .tooltip divs to the end of the document, which my page isn’t doing.

Any idea what might be preventing it from working correctly in WordPress? I’ve pasted my HTML page source here: http://pastebin.com/3xAhXgrK

[Watson90]

Maybe try adding the 5 lines of JS code to the footer of your document?

Just before the closing `` tag?

[daclements]

I gave that a go, by switching the action hook to wp_footer instead of wp_head, but still no joy. It’s not immediately before the tag, but it’s below all of the page content. Not sure that it makes that much of a difference (perhaps it does?)

[daclements]

Hmm, OK. We’re getting somewhere… I changed lines 72 to 76 as [following](http://pastebin.com/sMLz3xQj “jQuery function”). The tooltips do now appear, but they’re not showing in the right location. They’re quite far away from the item. Note that rather than just wrapping the function in jQuery(), I had to edit the original script to move the $ inside the function() (per your guiding syntax above), whereas previously it was outside – $(function() {

Do you think I need to make further modifications to tooltips.js, like I did to the lines above to get the function to work inside WordPress?

[daclements]

Actually, I noticed that links in the sidebar were fine, but the links I’m really interested in are inside a pricing table, which includes its own div and uls (line 115 onwards in the original pastebin). Any idea why these particular a tags are susceptible to the tooltip moving so far away from the link?

[daclements]

Sure. I just took my site out of maintenance mode, so you can see the page (no styling yet) [here](http://www.thewpbutler.com/plans/ “The WP Butler”).

I’ll move the script back to wp_footer then and see if that improves. Seems to be discriminating on the pricing table links though, since the others are working fine.

[daclements]

Well, thanks for your help. It’s getting there…

[Author]

Posts