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">
<a class="mylink" id="1" href="#" >Test</a>
<a class="mylink" id="2" href="#" >Test</a>
<a class="mylink" id="3" href="#" >Test</a>

JavaScript

$('.mylink').attr('title','Here\'s a tooltip');

$('.mylink').tipsy({trigger:'manual',gravity:'n', html:true});

var timer;

var tipsymouseoverfunction = function(id) {

    $('.tipsy').live('mouseover',function(e){
       clearTimeout(timer);
    });

    $('.tipsy').live('mouseout',function(e){
        timer = setTimeout('$("#' + id + '").tipsy("hide");',1000);//hide the link in 3 seconds
    });

}

$('.mylink').bind('mouseover',function(e){
    var id = $(this).attr('id');
timer = setTimeout('$("#' + id + '").tipsy("show");',1500);    
    tipsymouseoverfunction(id);
 });


$('.mylink').bind('mouseout',function(e){
   clearTimeout(timer);
var id = $(this).attr('id');
timer = setTimeout('$("#' + id + '").tipsy("hide");',2000);//hide the link in 3 seconds
});