JSFiddle - React, Tailwind, and code Playground
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
function tipsyfy(){
$(".tipsyfy").each(function () {
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
})
});
}
$(document).ready(function(){
tipsyfy();
$('<a href="#" title="Some tooltip" class="tipsyfy show-right">Ajax added simple tipsy</a><br/>').appendTo(document.body);
});