JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<div class="wrapper1" id="test" onmouseover="onRoll('wrapper1', 1);" onMouseOut="onRoll('wrapper1', 2)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique commodi, nulla optio mollitia, minima labore nesciunt culpa aliquid corporis quia facere totam odit nihil, blanditiis nobis assumenda, obcaecati quas! Temporibus fugiat quidem, ab delectus unde libero ipsa, magni asperiores harum incidunt! Voluptatum ea ut voluptatibus enim, omnis et amet ducimus!
    <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit eveniet libero nisi, odio quibusdam facilis, ea in? Ex fuga ipsum totam omnis ea atque, esse, ducimus dolore consequuntur. Libero omnis aspernatur quis nostrum, in tenetur quia, minus sit fugiat repudiandae ducimus molestiae obcaecati! Quo perferendis placeat veniam natus ad nobis beatae blanditiis, quam porro labore. Hic aperiam non tempora, veniam!</div>
  </div>
         
  <div class="wrapper2" id="test" onmouseover="onRoll('wrapper2', 1);" onMouseOut="onRoll('wrapper2', 2)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique commodi, nulla optio mollitia, minima labore nesciunt culpa aliquid corporis quia facere totam odit nihil, blanditiis nobis assumenda, obcaecati quas! Temporibus fugiat quidem, ab delectus unde libero ipsa, magni asperiores harum incidunt! Voluptatum ea ut voluptatibus enim, omnis et amet ducimus!
    <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit eveniet libero nisi, odio quibusdam facilis, ea in? Ex fuga ipsum totam omnis ea atque, esse, ducimus dolore consequuntur. Libero omnis aspernatur quis nostrum, in tenetur quia, minus sit fugiat repudiandae ducimus molestiae obcaecati! Quo perferendis placeat veniam natus ad nobis beatae blanditiis, quam porro labore. Hic aperiam non tempora, veniam!</div>
  </div>
        
  <div class="wrapper3" id="test" onmouseover="onRoll('wrapper3', 1);" onMouseOut="onRoll('wrapper3', 2)">Lorem...

CSS

@charset "UTF-8";
.wrapper1,.wrapper2,.wrapper3,.wrapper4 {
text-transform: uppercase;
background: #39c;
color: #555;
padding: 10px;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 10px;
margin: 20px;
position: relative;
text-align: center;
width: 150px;
display: inline-block;
height: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.wrapper1 .tooltip,.wrapper2 .tooltip,.wrapper3 .tooltip,.wrapper4 .tooltip {
background: #ccc;
right: 100%;
color: #555;
display: block;
left: 100%;
height: 100%;
bottom: 0px;
opacity: 0;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper1 .tooltip:before, .wrapper2 .tooltip:before, .wrapper3 .tooltip:before, .wrapper4 .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.wrapper1:hover .tooltip, .wrapper2:hover .tooltip, .wrapper3:hover .tooltip, .wrapper4:hover .tooltip {
opacity: 1;
pointer-events: auto;
}
.wrapper1:hover .tooltip {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.wrapper2:hover .tooltip {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.wrapper3:hover .tooltip {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform:...

JavaScript

function onRoll(cl, cond) {
		if (cond === 1) {
            var element = document.getElementsByClassName(cl);
			for (var i=0; i<element.length; i++) {
                element[i].style.zIndex = '1000';
            }
		} else if (cond === 2) {
			var element = document.getElementsByClassName(cl);
			for (var i=0; i<element.length; i++) {
                element[i].style.zIndex = '10';
            }
		}
}