JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<p title="text">123</p>
<span>456</span>
<a href="#" title="atext">789</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p title="text">123</p>
<span>456</span>
<a href="#" title="atext">789</a>

CSS

body {
    padding: 100px;
}
#tooltip {
    position:absolute;
    display:none;
    top:0px;left:0px;border: solid p1 #ccc;background:#efefef;border-radius: 4px;padding:3px;

}

JavaScript

$(function() {
    $('[title]').attr('title', function(i, title) {
        $(this).data('title', title).data('tooltip', true).removeAttr('title');
    });    
    $('*').hover(function(){
        $('#ttt').remove();
        $('body').append('<span id="ttt" style="position:fixed;bottom:10px;left:10px;padding:3px;background:#ccc;">' + $(this).data('tooltip') + '</span>')
        if ($(this).data('tooltip')) {
            toolTip.show($(this),$(this).data('title'))
        }
    });
});

var toolTip = {
    show: function(element, text) {
      if (this.object != element) {
          toolTip.hide();
          this.object = element;          
          var coords = element.offset();
          $('body').append('<div id="tooltip">' + text + '</div>');
          $('#tooltip').css('top', coords.top - 20 + 'px').css('left', coords.left - 20 + 'px').delay(500).fadeIn(200);
          element.bind('mouseleave', function() {toolTip.hide()}).bind('mousedown',  function() {toolTip.hide()})
      }
    },
    hide: function(element){
         this.object = '';
         $('#tooltip').remove();
    },
    object: ''
}