JSFiddle - React, Tailwind, and code Playground

by Glenn Marks

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<span class="MeHover" data-hover-text="tester<br/>tester">
MY AREA
</span>
<br/><br/>
<span class="MeHover FloatRight" data-hover-text="tester<br/>tester">
MY RIGHT AREA
</span>
<br/><br/>
<br/><br/>
<span class="MeHover FloatRight" data-hover-text="tester tester">
MY RIGHT AREA
</span>

CSS

.FloatRight{
	float:right
}
div.HoverText {
	box-sizing: border-box;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    min-width: 300px;
    background-color: #B0B0B0;
    padding: 5px;
    border: 3px solid #909090;
    color: #FFF;
    z-index: 999
}
div.HoverText .Pointer {
    position: absolute;
    left: -16px;
    top: 50%
}
div.HoverText .Pointer:after,div.HoverText .Pointer:before {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0
}
div.HoverText .Pointer:before {
    top: 0;
    border: 16px solid transparent;
}
div.HoverText .Pointer:after {
    top: 4px;
    left: 4px;
    border: 12px solid transparent;
}

/* LEFT (DEFAULT SO LESS CSS) */
div.HoverText .Pointer.p-left:before {
    border-right: 16px solid #909090;
    border-left: none
}
div.HoverText .Pointer.p-left:after {
    border-right: 12px solid #B0B0B0;
    border-left: none
}

/* RIGHT */
div.HoverText .Pointer.p-right {
    left: initial;
    right: -16px
}
div.HoverText .Pointer.p-right:after,div.HoverText .Pointer.p-right:before {
    left: initial;
    right: 0
}
div.HoverText .Pointer.p-right:before {
    border-left: 16px solid #909090;
    border-right: none
}
div.HoverText .Pointer.p-right:after {
    right: 4px;
    border-left: 12px solid #B0B0B0;
    border-right: none
}

/* TOP */
div.HoverText .Pointer.p-bottom,div.HoverText .Pointer.p-top {
    left: 50%;
	top: -16px;
}
div.HoverText .Pointer.p-bottom:before,div.HoverText .Pointer.p-top:before {
    border-bottom: 16px solid #909090;
    border-top: none
}
div.HoverText .Pointer.p-bottom:after,div.HoverText .Pointer.p-top:after {
    border-bottom: 12px solid #B0B0B0;
    border-top: none
}

/* BOTTOM */
div.HoverText .Pointer.p-bottom {
	left: 50%;
    top: initial;
    bottom: -16px
}
div.HoverText .Pointer.p-bottom:after,div.HoverText .Pointer.p-bottom:before {
    top: initial;
    bottom: 0
}
div.HoverText .Pointer.p-bottom:before {
   ...

JavaScript

$.fn.HoverText = function (text, options) {
    if (!!text) {
        var
			// Set Options
            fOpts = $.extend({
                setMy: "left",
                at: "right center",
				
                mobileChange: 740,
                mobileSetMy: "top",
                mobileAt: "center bottom",
				
                addPointer: true,
                pointerSize: 16,
				
                keepOpen: true,
                hoverDelay: 0,
                hoverLeaveDelay: 333,
				
				allowHtml: true
            }, options),
            // Function Variables
            hoverBox = $("<div class=\"HoverText\" />"),
            pointer = $("<div class=\"Pointer\"/>"),
            timer,
            t = $(this),
			keepHoverBox = fOpts.keepOpen ? hoverBox : null;
			
		// Add Text Base On `allowHtml`
		if (fOpts.allowHtml)
			hoverBox.html(text);
		else
			hoverBox.text(text);
		
		// Add `pointer` Based On `addPointer`
        if (fOpts.addPointer)
            pointer.appendTo(hoverBox);
        hoverBox.hide();
		
		// Create Listeners
        t.add(keepHoverBox).mouseenter(function () {
            clearTimeout(timer);
			timer = setTimeout(function () {
			    ShowHoverBox();
			}, fOpts.hoverDelay);
        }).mouseleave(function (e) {
			clearTimeout(timer);
			HideHoverBox(e);
        });

        function ShowHoverBox() {
			// Variabels
            var o = $.isNumeric(fOpts.mobileChange) && $(document).outerWidth() < fOpts.mobileChange;
			
			// Add `hoverBox` To `body` (If It Doesn't Exist)
            if (!$.contains($("body"), hoverBox))
                $("body").append(hoverBox);
				
			// Reset `hoverBox` .css
            hoverBox.css({
                'top': 0,
                'left': 0
            }).position({
                my: o ? fOpts.mobileSetMy : fOpts.setMy,
                at: o ? fOpts.mobileAt : fOpts.at,
                of: t,
                collision: "flipfit",
                using: function (position, feedback) {
					//...