JSFiddle - React, Tailwind, and code Playground

by gedave

HTML

<span class="link">
  <p>
    
    <font face=verdana,arial,helvetica size=2>Help me!</font>
    <span>
        Here is where you can get all kinds of help!<br><br>
        Just read through our handy dandy instructions. We are super-duper helpers and we've written the most helpful tips that you will ever see. You will love our tips.<br><br>
        And we're nice people too!
     </span>

        </p>          
</span>

CSS

span.link {
    	position: relative;
}

    span.link p span {
    	display: none;
}

span.link p:hover {
    	font-size: 99%;
    	font-color: #000000;
}

span.link p:hover span { 
    display: block; 
    	position: absolute; 
    	margin-top: 10px; 
    	margin-left: -10px; 
	    width: 175px; padding: 5px; 
        border: 1px
    	z-index: 100; 
    	color: #000000; 
    	background: #FFFFAA; 
    	font: 12px "Arial", sans-serif;
    	text-align: left; 
    	text-decoration: none;
}
                    
    left:90px; background-color:#ffffcc;
                    
    layer-background-color:#ffffcc;}

JavaScript

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered
function pw() {return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; function mouseX(evt) {return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} function mouseY(evt) {return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} function popUp(evt,oi) {if (document.getElementById) {var wp = pw(); dm = document.getElementById(oi); ds = dm.style; st = ds.visibility; if (dm.offsetWidth) ew = dm.offsetWidth; else if (dm.clip.width) ew = dm.clip.width; if (st == "visible" || st == "show") { ds.visibility = "hidden"; } else {tv = mouseY(evt) + 20; lv = mouseX(evt) - (ew/4); if (lv < 2) lv = 2; else if (lv + ew > wp) lv -= ew/2; lv += 'px';tv += 'px';  ds.left = lv; ds.top = tv; ds.visibility = "visible";}}}