JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
<br/><br/>
<a href="#" title="Some tooltip" class="tipsyfy">Simple tipsy</a><br/>
<a href="#" title="Some tooltip" class="tipsyfy">Simple tipsy</a><br/>
<a href="#" title="Some tooltip" data-delayIn="1000" class="delayed tipsyfy">Delayed tipsy</a><br/>
<a href="#" title="Some tooltip" class="tipsyfy show-right">Tipsy right</a><br/>
<a href="#" title="Some tooltip" data-delayIn="1000" class="tipsyfy show-down delayed">Tipsy down delayed</a><br/>
<br/><br/>

JavaScript

$(document).on("mouseenter", ".tipsyfy", function(e) {
    if ( !$(this).data("tipsy") ) {
        e.preventDefault();
        var a = "s",
            b = 0;
        if ($(this).hasClass("show-left")) a = "e";
        else if ($(this).hasClass("show-down")) a = "n";
        else if ($(this).hasClass("show-right")) a = "w";
        if ($(this).hasClass("delayed") && $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn");
        $(this).tipsy({
            gravity: a,
            fade: true,
            live: true,
            delayIn: b
        }).trigger("mouseenter");
        return false;
    }
});

$(document).ready(function(){
   $('<a href="#" title="Some tooltip" class="tipsyfy show-right">Ajax added simple tipsy</a><br/>').appendTo(document.body);
});