JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.myotherdrive.com/dyn/file/507.344909.01062010.73337.6a64fi/jquery.qtip-1.0.min.js"></script>
<div id="demo">Example Tooltip: Hover over me and the tooltip will appear below.</div>

CSS

#demo {
    width: 100px;
    padding: 10px; 
    background: #ddd;
    cursor: pointer;
    position: relative;
    top: 40px;
    left: 40px;
}

JavaScript

$(document).ready(function(){
    $("#demo").qtip({
        content: 'Tooltip Content goes here',
        style: { 
            name: 'cream',           // Inherit from preset style
            tip:  'topMiddle'        // adds the pointy part to the tooltip window
        },
        textAlign: 'center',        // Center the tooltip contents
        position: {
            corner: {
                target: 'bottomMiddle',   // Location of tooltip relative to #demo when it opens
                tooltip: 'topMiddle'      // Portion of tooltip that meets with the target
            }
        }
        
    }).draggable();  // make draggable, for demo only.
})