JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css">
<p><a href="#" id="click">Click here</a> to show the tooltip below. You'll see two log messages appear showing that the api.show() method fires twice on first run.</p>

<p><span class="tooltip" title="qTip!">Tooltip</span></p>

<h3>Log</h3>
<p id="log"></p>

CSS

body {
    margin: 20px 10px;
}

p {
    margin: 20px 0;
}

JavaScript

var showCounter = 0;

var $tooltip = $(".tooltip").qtip({
    position: {at: 'bottom right', my: 'top left'}
    , show: {
        ready: false
        , event: false
        , effect: function (offset){
            $("#log").append("<div>show call #" + (++showCounter) + "</div");
            $(this).fadeIn(350);
        }
    }
});

$("#click").click(function (e){
    e.preventDefault();

    // API only called once, but runs twice on first click
    $tooltip.qtip("show");
    
    // hide the qTip
    setTimeout(function (){
        $tooltip.qtip("hide");
    }, 1000);
});