JSFiddle - React, Tailwind, and code Playground

by RubenJonker

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

var title;   
 $('a.tooltip').hover(function() {
        title = $(this).attr('title');
        var offset = $(this).offset();
        var width = $(this).outerWidth();
        var height = $(this).outerHeight();
        $content = $('<div class="tooltip">' + title + '</div>').fadeIn('fast');
        $(this).append($content);
        $(this).attr('title', '');
        $content.offset({ top: offset.top+height, left: offset.left+(width-$content.outerWidth())/2 });
    }, function() {
        $(this).find('div').fadeOut('fast');
        $(this).attr('title', title);
    });