JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<span class="tip" data-text="Best band ever">Dream Theater</span> are an American progressive metal band formed in 1985 under the name Majesty by <span class="tip" data-text="The guitarist">John Petrucci</span>, <span class="tip" data-text="The bassist">John Myung</span>, and <span class="tooltip" data-text="The drummer">Mike Portnoy</span> while they attended Berklee College of Music in Massachusetts.

<div id="tip"></div>

CSS

#tip {
    position           : absolute;
    z-index            : 10;
    display            : none;
    background-color   : pink;
    padding            : 10px;
    border-radius      : 5px;
    -moz-border-radius : 5px;
}

.tip {
    color    : red;
    cursor   : pointer;
}

}

JavaScript

$(function() {
    var $tip  = $('#tip'),
        $tips = $('.tip'),
        $body = $('body');
    
    $(document).mousemove(function(e) {
        if (e.pageY < $tip.height() + 20) {
            e.pageY += $tip.height() + 40; 
        }
        if (e.pageX > $body.width() - $tip.width() - 100) {
            e.pageX -= $tip.width0 - 140; 
        }
        $tip.css({
            top  : parseInt(e.pageY - 40) + 'px',
            left : parseInt(e.pageX + 30) + 'px'
        });
    });
    
    $tips.hover(function () {
        
        var $this = $(this);
        $tip.show().html($this.data('text'));
            
    }, function () {
        $tip.hide().empty();
    });
});