[Resolved] Best way for integrating JQuery Tooltips?

[Mike]

Has anybody had any experience using JQuery tooltips when using GP and BeaverBuilder?

I’m not too keen on using ToolTip WP plugins and would prefer using JQuery instead for several reasons the main being most of them are outdated and not well-maintained.

So far I’ve tried to integrate tooltipster and the bootstrap version with no luck. Seems to break the site.

[Tom]

I’ve used tooltipster before. Actually, it’s used here on this site – hover over the premium features under the price: https://generatepress.com/premium/

[Mike]

Oh you’ve done it! Brilliant – looks really nice. Could you please point me in the right direction in how to properly implement it? Here’s what I did:

1) Downloaded Tooltipster off here: http://iamceege.github.io/tooltipster/

2) Unzipped and placed tooltipster.bundle.min.js and tooltipster.bundle.min.css into the Child theme’s folder (as well as WordPress root in case it’s the wrong location)

3) In GP Hooks > WP_Head I put the following code:

<link rel=”stylesheet” type=”text/css” href=”tooltipster.bundle.min.css” />
<script type=”text/javascript” src=”tooltipster.bundle.min.js”></script>
<script>
$(document).ready(function() {
$(‘.tooltip’).tooltipster();
});
</script>

4) I put the following: <span class=”tooltip” title=”This is my span’s tooltip message!”>Some text</span> just anywhere really, it doesn’t show the tooltip.

I didn’t include <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.0.min.js”></script&gt; because I assume that the latest JQuery comes with GP. However, even including it didn’t help.

[Tom]

Your script isn’t quite right.

1. You need the full URL to your scripts.
2. WordPress requires that jQuery be specified:

<link rel="stylesheet" type="text/css" href="FULL URL TO CHILD THEME/tooltipster.bundle.min.css" />
<script type="text/javascript" src="FULL URL TO CHILD THEME/tooltipster.bundle.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.tooltip').tooltipster();
});
</script>

[Mike]

Hello Tom,

Thanks for your response. Works now! Phew!

[Tom]

This part isn’t necessary: <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.0.min.js”></script>

You’re still missing the yoursite.com from the href and src tags.

[Mike]

I made a mistake by re-pasting my own faulty code instead of yours – then edited yours with the direct URL and got it to work.

Thanks for your support as ever! 🙂

[Tom]

Glad I could help! 🙂

[Author]

Posts