JSFiddle - React, Tailwind, and code Playground

by enginustun

HTML

<a href="#" class="border" data-tooltip="sample-1">sample 1</a>

<br/>
<br/>
<div data-tooltip="tooltip message here" class="border">sample 2</div>
<p data-tooltip="sample-3" class="border">sample 3</p>
<ul>
    <li data-tooltip="this message box have max-width:200; it can change from css" class="border">List item</li>
</ul>

CSS

.tooltip {
    position: absolute;
    display: none;
    z-index: 999;
    /*optional*/
}
.tooltip-arrow {
    text-align:center;
}
.tooltip-arrow span {
    width: 0;
    height: 0;
    margin-left:-10px;
    border-top: 10px solid #222;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
}
.tooltip-message {
    padding: 6px;
    color: #fff;
    font-size: 0.75em;
    max-width: 200px;
    border: 3px solid #222222;
    background: rgba(55, 55, 55, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.border {
    padding:5px;
    margin:5px;
    border:1px dashed #ccc;
}

JavaScript

$('body').append('<div class="tooltip"><div class="tooltip-arrow"><span></span></div><div class="tooltip-message"></div></div>');

$(document).on('mouseenter', '[data-tooltip]', function (e) {
    var $this = $(this);
    var message = $this.attr('data-tooltip');
    var tooltip = $('.tooltip');
    tooltip.css({
        'display': 'block'
    });
    tooltip.stop().animate({
        opacity: 1
    }, 600);
    var tooltipMessage = $('.tooltip-message', tooltip);
    tooltipMessage.html(message);
});

$(document).on('mouseleave', '[data-tooltip]', function (e) {
    var tooltip = $('.tooltip');
    tooltip.stop().animate({
        opacity: 0
    }, 600, function () {
        tooltip.css({
            'display': 'none'
        });
    });
});

$(document).on('mousemove', '[data-tooltip]', function (e) {
    var $this = $(this);
    var tooltip = $('.tooltip');
    var tooltipArrow = $('.tooltip-arrow').clone();
    $('.tooltip-arrow').remove();
    var tooltipArrowCss = {
        'transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-webkit-transform': ' rotate(0deg)'
    };
    tooltip.append(tooltipArrow);
    var mouseX = e.pageX;
    var mouseY = e.pageY;
    var top = mouseY - tooltip.height() - 30;
    var left = mouseX - (tooltip.width() / 2);
    var difference = $this.position().top - $(document).scrollTop();
    if (top < 0 || difference < tooltip.outerHeight()) {
        top = mouseY + $this.outerHeight(true) + 10;
        tooltipArrowCss = {
            'transform': 'rotate(180deg)',
                '-ms-transform': 'rotate(180deg)',
                '-webkit-transform': ' rotate(180deg)'
        };
        $('.tooltip-arrow').remove();
        tooltip.prepend(tooltipArrow);
    }
    if (left < 0) {
        left = 0;
    }
    if (left > ($(window).width() - tooltip.width())) {
        left = $(window).width() - tooltip.width();
    }
    tooltip.css({
        'top': top,
            'left': left
    });
   ...