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>

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

CSS

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

#tooltip:before{
  content: "";
  position: absolute;
  left: 20px; bottom: -12px;
  border: 6px solid transparent;
  border-top: 6px solid #000000;
}

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

JavaScript

this.ToolTip = function(){

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

    $("a, img, acronym").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, acronym").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{
           ...