[Resolved] Best way for integrating JQuery Tooltips?

Home Forums Support Best way for integrating JQuery Tooltips?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #309682
    onlyonemj

    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.

    GeneratePress 1.3.46
    #309847
    Tom
    Lead Developer
    Lead Developer

    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/

    #309990
    onlyonemj

    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.

    #310104
    Tom
    Lead Developer
    Lead Developer

    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>
    #310120
    onlyonemj

    Hello Tom,

    Thanks for your response. Works now! Phew!

    #310123
    Tom
    Lead Developer
    Lead Developer

    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.

    #310127
    onlyonemj

    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! 🙂

    #310134
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.