JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/enriquez/ezpz-tooltip/jquery.ezpz_tooltip.js"></script>
<link rel="stylesheet" href="http://theezpzway.com/stylesheets/application.css?1288828195">
<span id="example-target-1">Hover over me</span>
<div id="simple-content-1" class="simple-tooltip-content tooltip-content" style="top: 611px; left: 517px;">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...
    </p>
</div>

CSS

.tooltip-content {
    background-color: #FFC848;
    border: 3px solid #AF8A31;
    color: black;
    display: none;
    padding: 10px;
    position: absolute;
    text-align: center;
    width: 250px;
}

JavaScript

$(document).ready(function(){
  $("#example-target-1").ezpz_tooltip({
    contentId: 'simple-content-1',
    showContent: function(content) {
        content.fadeIn('slow');
    },
    hideContent: function(content) {
        // if the showing animation is still running, be sure to stop it
        // and clear the animation queue. otherwise, repeatedly hovering will
        // cause the content to blink.
        content.stop(true, true).fadeOut('slow');
    }
});
});