JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<a href="#" onmouseover="tooltip('text',this);" onmouseout="hide();" id="srcElement">Link Text</a>
<br>
<a href="#" onmouseover="tooltip('text',this);" onmouseout="hide();" id="srcElement">Link Text</a>
<br>
<a href="#" onmouseover="tooltip('text',this);" onmouseout="hide();" id="srcElement">Link Text</a>
<div id="ttdiv"></div>

CSS

div#ttdiv {
     display: none; 
	
	width: 300px;
	height: 300px;
	border: 1px solid;
	background-color: #ffa;
	position: fixed;
	z-index: 100000;
  }

JavaScript

function tooltip(text,element) {

    var offsetDistance = 20;
  
    tt = document.getElementById('ttdiv');
	elem = document.getElementById(element.id);
	tt.style.top = elem.offsetTop + offsetDistance + 'px';
	tt.style.left = elem.offsetLeft + offsetDistance + 'px';
	tt.style.display = 'block';
	tt.innerHTML = text;
	
  }
  
  function hide() {
    tt = document.getElementById('ttdiv');
	tt.style.display = 'none';
  }