JSFiddle - React, Tailwind, and code Playground

by Amit Pandya

HTML

<p align='center'>
<a href="http://www.lipsum.com/" id="tooltip">Lorem ipsum
    <span><b></b>
        <strong>Lorem ipsum</strong><br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium fermentum nisi bibendum faucibus. Nam eget tristique lectus, et pellentesque urna. Vivamus elementum malesuada mauris. Praesent sit amet consequat arcu. Vivamus tincidunt lorem a blandit pharetra. Aliquam tincidunt, ligula eleifend ullamcorper fermentum, ipsum erat laoreet orci, at euismod justo lectus vitae augue. Cras eu tincidunt libero..
    </span>
</a>
</p>

CSS

#tooltip {
		outline: none;
		text-decoration: none;
		border-bottom: dotted 1px blue;
		position: relative;
	}

	#tooltip strong {
		line-height: 30px;
	}

	#tooltip > span {
		width: 300px;
		padding: 10px 20px;
		margin-top: 0;
		margin-left: -120px;
		opacity: 0;
		visibility: hidden;
		z-index: 10;
		position: absolute;
		font-family: Arial;
		font-size: 12px;
		font-style: normal;
		border-radius: 3px;
		box-shadow: 2px 2px 2px #999;
		-webkit-transition-property: opacity, margin-top, visibility, margin-left;
		-webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
		-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
		transition-property: opacity, margin-top, visibility, margin-left;
		transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
		transition-timing-function: 
			ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	}

	#tooltip:hover > span {
		opacity: 1;
		text-decoration: none;
		visibility: visible;
		overflow: visible;
		margin-top: 50px;
		display: inline;
		margin-left: -90px;
	}

	#tooltip span b {
		width: 15px;
		height: 15px;
		margin-left: 40px;
		margin-top: -19px;
		display: block;
		position: absolute;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-box-shadow: inset -1px 1px 0 #fff;
		-moz-box-shadow: inset 0 1px 0 #fff;
		-o-box-shadow: inset 0 1px 0 #fff;
		box-shadow: inset 0 1px 0 #fff;
		display: none\0/;
		*display: none;
	}    

	#tooltip > span {
		color: #FFFFFF; 
		background: #333333;
		background: -webkit-linear-gradient(top, #333333, #999999);
		background: linear-gradient(top, #333333, #999999);	    
		border: 1px solid #000000;	     
	}    
		  
	#tooltip span b {
		background: #333333;
		border-top: 1px solid #000000;
		border-right: 1px solid #000000;
	}