JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<script src="http://www.math.cmu.edu/~gautam/share2/plugins/jQuery.pTooltip/jQuery.pTooltip.js"></script>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>
<span title="">some text </span><br/>

JavaScript

$("[title]").bind("mouseleave", function (event) {
        var evt = event ? event : window.event;

        var target = $(evt.srcElement || evt.target);

        evt.stopImmediatePropagation();

        var fixed = setTimeout(
            function () {
                target.tooltip("close");
            }, 200);

        $(".ui-tooltip").hover(
				    function () { clearTimeout(fixed); },
				    function () { target.tooltip("close"); }
				);
    });
$("[title]").tooltip({
        content: "...wait...",
        position: { my: "left top", at: "right center" },
        open: function (event, ui) {            
            var _elem = ui.tooltip;

            window.setTimeout(
                function() {                                            
                        var html = "ololo!";
    
                        _elem.find(".ui-tooltip-content").html(html);
                    },
                200);
        },
        track: false,
        show: 100
    });