Grow your CSS skills. Land your dream job.

jQuery Tooltips in WordPress

  • # December 13, 2012 at 9:45 am

    I’m trying to get Chris’ [jQuery Tooltips](http://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

    # December 13, 2012 at 10:57 am

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

    Just before the closing `` tag?

    # December 13, 2012 at 1:04 pm

    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?)

    # December 13, 2012 at 1:18 pm

    @daclements, looking at your pastebin, your opening is just `

    # December 13, 2012 at 1:50 pm

    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?

    # December 13, 2012 at 1:56 pm

    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?

    # December 13, 2012 at 3:16 pm

    Do you have a link I could look at?

    Also, to @Watson90‘s point, and your question earlier, it’s ideal to have your jquery at the last possible line before your `` tag, that way the page loads fully before working on the jquery.

    # December 13, 2012 at 3:24 pm

    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.

    # December 13, 2012 at 4:08 pm

    I’m sorry dude, I’m stumped..it looks as though the positioning for those tooltips is based off your `.pricing-table` div, and not off the links themselves.

    # December 13, 2012 at 4:13 pm

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".