JSFiddle - React, Tailwind, and code Playground

HTML

<span class="show-tool-tip" title="This is a demo tooltip, pretty neat huh?"> Hover Over Me </span>

CSS

.tool-tip:before {
    position: absolute;
    border: 12px solid transparent;
    border-bottom: 12px solid rgba(249, 174, 24, 0.4);
    content: '';
    width: 0; height: 0;
    top: -28px; left: 24px;
}
.tool-tip {
    border: 4px solid rgba(249, 174, 24, 0.4);
    border-radius: 8px;
    padding: 0px;
    position: absolute;

}
.tool-tip p {
    background: rgba(255,255,255,0.85);
    color: #666666;
    border-radius: 4px;
    border: 1px solid #dddddd;
    margin: 0; padding: 12px;
    font-weight: 100; font-size: 12px; line-height: 18px;
}

JavaScript

$('.show-tool-tip').mouseenter(function(e) {
        // Disable the default tooltip.
        e.preventDefault();
        var $this = $(this);
        $this.attr('tt', $this.attr('title'))
                   .removeAttr('title');
                   
        // Store our timeout function in .data
        $this.data("hover_delay", setTimeout(function(title) {
            $('<aside class="tool-tip"><p>'+$this.attr('tt')+'</p></aside>').hide()
                .appendTo( $this )
                .css( {
                    'top' : (e.pageY + 16) + "px",
                    'left' : (e.pageX - 40) + "px"
            }
            ).fadeIn(500);
        }
        , 1600));
    }
    ).mouseleave(function() {
        var hover_delay = $(this).data("hover_delay");
        if (hover_delay) {
            clearTimeout(hover_delay);
            $(this).attr('title', $(this).attr('tt'));
            $(this).children('.tool-tip').fadeOut();
        }
    });