JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
Use of ui.tooltip widget:
<div id="aDiv" title="Text of the tooltip">To this point <span>&bullet;</span></div>
Mouve your mouse from this point <span>&bullet;</span>
<br /><br /><br />

Use of extended ui.tooltipX widget:
<div id="aDivX" title="Text of the tooltip">To this point <span>&bullet;</span></div>
Mouve your mouse from this point <span>&bullet;</span>
<br /><br />

CSS

body {
    padding-top: 100px;
}
#aDiv, #aDivX {
    width: 450px;
    height: 50px;
    background-color: #CCC;
    padding-left: 140px;
}
span {
    font-size: 20px;
}

JavaScript

/*
 * See onload function at line 118.
 */

/*
 * Extend ui tooltip widget to resolve a display bug.
 * _open() method has beed overrided in order to just add tooltip.hide() at line 68.
 * 
 */
(function($) {
    function addDescribedBy( elem, id ) {
        var describedby = (elem.attr( "aria-describedby" ) || "").split( /\s+/ );
        describedby.push( id );
        elem
            .data( "ui-tooltip-id", id )
            .attr( "aria-describedby", $.trim( describedby.join( " " ) ) );
    }
    
    $.widget("ui.tooltipX", $.ui.tooltip, {
        _open: function( event, target, content ) {
            var tooltip, events, delayedShow,
                positionOption = $.extend( {}, this.options.position );
    
            if ( !content ) {
                return;
            }
    
            // Content can be updated multiple times. If the tooltip already
            // exists, then just update the content and bail.
            tooltip = this._find( target );
            if ( tooltip.length ) {
                tooltip.find( ".ui-tooltip-content" ).html( content );
                return;
            }
    
            // if we have a title, clear it to prevent the native tooltip
            // we have to check first to avoid defining a title if none exists
            // (we don't want to cause an element to start matching [title])
            //
            // We use removeAttr only for key events, to allow IE to export the correct
            // accessible attributes. For mouse events, set to empty string to avoid
            // native tooltip showing up (happens only when removing inside mouseover).
            if ( target.is( "[title]" ) ) {
                if ( event && event.type === "mouseover" ) {
                    target.attr( "title", "" );
                } else {
                    target.removeAttr( "title" );
                }
            }
    
            tooltip = this._tooltip( target );
            addDescribedBy( target,...