JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="tooltip" title="test">I'm a tooltip.</a>
<br /><br />
<a href="#">I'm a regular link.</a>
<br /><br />
<a href="#" class="tooltip" title="longer text here">test</a>
CSS
div.tooltip {
position: absolute;
background-color: black;
color: white;
}
JavaScript
$('a.tooltip').hover(function() {
var title = $(this).attr('title');
var content = '<div class="tooltip">' + title + '</div>';
$(this).append(content).fadeIn('fast');
$('div.tooltip').hover(function() {
$(this).fadeOut('fast');
});
}, function() {
$(this).find('div').fadeOut('fast');
});