JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/lorenzos/FloatingTips/2.4/Source/FloatingTips.js"></script>
<div><b>FloatingTips demo page</b></div>

<div id="simple">
    <p>Some simple tips. Different position, always centered:</p>
    <p>
        <a href="#" title="A tooltip." class="top">Default (top)</a> |
        <a href="#" title="Another tooltip." class="bottom">Bottom</a> |
        <a href="#" title="Again..." class="left">Left</a> |
        <a href="#" title="Ok, you got it." class="right">Right</a>
    </p>
</div>

<div id="customized">
    <p>A customized tip. Not centered, bigger arrow, customized content:</p>
    <p><a href="#">What can I say about me?</a></p>
</div>

<div id="advanced">
    
    <p>An advanced <b>(and very cool!)</b> tip. HTML content:</p>
    <p><a href="#">Let me see!</a></p>
    
    <!-- This is the tooltip content. Note that is not displayed -->
    <!-- in the DOM. Inner HTML will be placed as tip content    -->
    <div id="htmlcontent" style="display: none;">
        <p style="overflow: hidden; padding-top: 10px; padding-bottom: 10px; width: 320px;">
            <img src="http://i.imgur.com/YRBFe.jpg?1761"
                 style="float: left; margin-right: 10px; width: 64px; height: 64px;">
            The Son of Man <i>(Le fils de l'homme)</i> is a 1964 painting
            by the Belgian surrealist painter Ren&eacute; Magritte.
            Magritte painted it as a self-portrait. 
            <i style="color: #666666;">(from Wikipedia, of course)</i>
        </p>
       
    </div>
    
</div>

<div id="focus">
    <p>You can show tooltip on focus instead of cursor events:</p>
    <p><input type="text" rel="About that field..." value="Edit me"></p>
</div>

<div>
    <p>
        Read Javascript comments on this demo or see
        <a href="https://github.com/lorenzos/FloatingTips/wiki/Docs"
           target="_blank">docs</a> 
        for more!
    </p>
</div>

CSS

body    { font-family: sans-serif; font-size: 13px; }
div     { margin: 20px 10px; }
p       { color: #999999; margin: 0 0 5px; }
a       { font-weight: bold; color: #3344FF; }
a:hover { font-weight: bold; color: #6677FF; }
input   { padding: 2px 5px; width: 200px; }

/* The following is the only rule you need to customize your tip look */

.floating-tip {
    background-color: black;
    padding: 5px 15px;
    color: #dddddd;
    font-weight: bold;
    font-size: 11px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

JavaScript

// Lets create four simple tips, one for each possible position.
new FloatingTips('#simple a.top'); // Top position is default
new FloatingTips('#simple a.bottom', { position: 'bottom' });
new FloatingTips('#simple a.left'  , { position: 'left'   });
new FloatingTips('#simple a.right' , { position: 'right'  });
            
// Let's create a customized tip
new FloatingTips('#customized a', {

    // Content can also be a function of the target element!
    content: function(e) { return 'I\'m a link and I am ' + e.getSize().x + ' px wide! :)'; },
    
    position: 'bottom', // Bottom positioned
    center: false,      // Place the tip aligned with target
    arrowSize: 12,      // A bigger arrow!
    
});

// The following is a tip with HTML content taken from a page element!
new FloatingTips('#advanced a', {
    
    // Content can be a string (an attribute name) or a function.
    // If it's a function, it can returns string or HTML elements.
    content: function() { return $('htmlcontent'); },
    
    html: true,        // I want that content is interpreted as HTML
    center: false,     // I do not want to center the tooltip
    arrowOffset: 16,   // Arrow is a little more the the right
    offset: { x: -10 } // Position offset {x, y}
    
});

// A tip that appears when entering data in an input field
new FloatingTips('#focus input', { 
    content: 'rel',
    position: 'right',
    showOn: 'focus',
    hideOn: 'blur',
    distance: 6
});