JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<a href="http://www.cssglobe.com" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a>

<acronym title="Web Standards Magazine">Css Globe</acronym>

CSS

#tooltip, acronym:hover::after {
    position: absolute;
    z-index: 999;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
    max-width: 300px;
}
#tooltip:before, acronym:hover:before {
  content: "";
  position: absolute;
  left: 20px; bottom: -12px;
  border: 6px solid transparent;
  border-top: 6px solid #000000;
}
acronym:hover:before {
  left: 50%;
  top: 13px;
  bottom: 0;
  margin-left:-3px;
  border-bottom: 6px solid #000000;
  border-top-color:transparent;
}
acronym {
  position:relative;
}
acronym:hover::after {
  top:25px;
  left:50%;
  margin-left:-100px;
  content: attr(title);
  width: 200px;
  max-width: 200px;
}

#tooltip.right:before{
  left: auto;
  right: 20px;
}

JavaScript

this.ToolTip = function(){

    // Задаем координаты ToolTip относительно курсора
    yOffset=10;
    xOffset=20;

    $("a, img").hover(

        function(e){

            // Проверяем, не равны ли Alt и Title
            // Если равны, то "выравниваем" их
            // Если они разные, то складываем
            if(this.title==this.alt){
                this.t=this.alt
            }else{
                this.t=this.title+this.alt
            }

            // Обнуляем действующие Alt и Title
            this.title=this.alt="";
            this.t=this.t.replace(/undefined/g,"");

            // Проверяем на ошибки, если их нет, то
            // проверяем не создан ли уже ToolTip,
            // ибо если будет одновременно и ссылка и изображение,
            // то будет неприятность - два ToolTip.
            // Поэтому если он уже создан, то объединяем
            if(this.t!='undefined'&&this.t!="NULL"&&this.t!=""){
                if($("div").is("#tooltip")){
                    $("#tooltip").append("<br>"+this.t);
                }else{
                    $("body").append("<div id='tooltip'>"+this.t+"</div>");
                }
            }
        },

        // Функция удаления ToolTip и возаращения данных в Title
        // Alt нам не нужен, ибо Title есть у всех, а Alt только у Img
        function(){
            this.title=this.t;
            $("#tooltip").remove();
        }
    );

    // Заставляем двигаться за курсором
    $("a, 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").addClass('right')
        }else{
            $("#tooltip").css("top",(e.pageY-yOffset)+"px").css("left",(e.pageX+xOffset)+"px").removeClass('right')
       ...