JSFiddle - React, Tailwind, and code Playground

by sarim

HTML

<h2>HTML5-CSS3 tooltip demo</h2>
<div>	

			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit <a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>	amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

			<p>Pellentesque habitant morbi <a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>	 senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

			<p>Pellentesque habitant morbi tristique senectus et netus et <a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>	 fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

		</div>

CSS

div {
			width: 50%;
			margin: 30px auto;
		}	
		
		p {
			font-family: arial;
			color: #999;
			line-height: 18px;
			font-size: 16px;
			margin: 0 0 18px 0;
		}
		
		a.tooltip {
			position: relative;
		}	
		
		a.tooltip::before {
			content: attr(data-tip) ;	
			font-family: arial, sans-serif;	
			font-size: 10px;
			font-weight: bold;
			position:absolute;
			z-index: 999;
			white-space:nowrap;
			bottom:9999px;
			left: 50%;
			background:#000;
			color:#e0e0e0;
			padding:0px 7px;
			line-height: 24px;
			height: 24px;
			
			opacity: 0;	
			-webkit-transition:opacity 0.4s ease-out;  
			-moz-transition:opacity 0.4s ease-out;  
			-o-transition:opacity 0.4s ease-out;  
			transition:opacity 0.4s ease-out; 
		}		
		
		
		a.tooltip:hover::before	{
			opacity: 1;
			bottom:-35px;
		}