JSFiddle - React, Tailwind, and code Playground

tooltip plain js

by Shah Danial

HTML

<div id="wrapper">

<span title="TItle saya">Some text</span>
<br/>
<br/>

<span title="title lu">Some text</span>
<br/>
<br/>

<span data-tooltip="<b>Title</b> gua">Some title text</span>
<br/>
<br/>

<span data-tooltip="<span>title mari</span> hahahahahah hahahah a hahahaha ahahahah ahahah ahahhahaha">Some text</span>
<br/>
<br/>





</div>

CSS

* {
  overflow:hidden;
  max-width:100%;
  height:auto;
}
body {
  padding:10px;background:#000;
}
.tooltip {
    position: absolute;
    color: #fff;
    background: #202731;
    display: inline-block;
    border: 1px solid #ddd;
    font-family: sans-serif;
    font-size: 14px;
    padding: 10px;
    border-radius: 3px;
    overflow: visible;
}


.tooltip:before {
    content: '';
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    margin-left: 0px;
    margin-top: -18.52px;
    background: #202731;
    border: 1px solid #ddd;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tooltip span {
  color:#d00;
  z-index:9999;
}

#wrapper  {
  text-align:right;
  background:#fff;
}

JavaScript

var tooltip = document.querySelectorAll('[data-tooltip]');
var body = document.getElementsByTagName('body')[0];
var tooltip_active = false;
var slow_event;
var slow_lagi_event;

if(tooltip){
	for (var i = 0; i < tooltip.length; i++) {
    var elem = tooltip[i];
    var tops = document.getElementsByClassName('tooltip');
    console.log(tooltip_active);
    if(!tooltip_active){
    
          elem.addEventListener('mouseenter',function(e){

                tooltipactive = true;
                
                
                			console.log('hover');
                      var tip = document.createElement('div');
                      tip.className = 'tooltip';
                      tip.innerHTML = this.getAttribute('data-tooltip');
                      var X = this.offsetLeft;//parseFloat(e.pageX) + parseFloat(2); 
                      var Y = parseFloat(e.pageY) + parseFloat(19);
                      console.log(X);
                      var style = 'left:'+X+'px;top:'+Y+'px;';
                      tip.setAttribute('style', style);
                      body.appendChild(tip);

                      this.addEventListener('mouseleave', function(){
                        var tips = document.getElementsByClassName('tooltip');
                        for (var ii = 0; ii < tips.length; ii++) {
                          var benda = tips[ii];
                          if(benda.parentNode){
                            benda.parentNode.removeChild(benda);
                            clearTimeout(slow_event);
                            slow_event = setTimeout(function(){
                              tooltip_active = false;
                            },2500);
                          }
                        }
                      });

          });
          
     }
    
	}
}