JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<img alt="Кролик" data-tt="rabbit" src="http://demo.g63.ru/images/rabbit48.png">
<img alt="Собака" data-tt="dog" src="http://demo.g63.ru/images/dog48.png">

<div id="rabbit" class="tooltip">В чём дела Док?</div>
<div id="dog" class="tooltip">Ты заходи, если что…</div>

CSS

.tooltip {
    position: absolute;
    z-index: 999;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
    max-width: 300;
    display:none;
}

JavaScript

this.ToolTip = function(){

    var yOffset=10,
    		xOffset=20;

    $("img").hover(
        function(){
            $("#"+$(this).attr('data-tt')).show();
        },
        function(){
            $("#"+$(this).attr('data-tt')).hide();
        }
    );

    $("img").mousemove(function(e){
        if($(document).width() / 2 < e.pageX){
            $(".tooltip").css("top",(e.pageY-yOffset)+"px").css('left',(e.pageX-$(".tooltip").width()-14-xOffset)+"px")
        }else{
            $(".tooltip").css("top",(e.pageY-yOffset)+"px").css("left",(e.pageX+xOffset)+"px")
        }
    })

};

ToolTip();