Tooltips

This CSS reference page displays example code that shows how to create a tooltip.

Tooltip.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
    <style>
    	.cTipTarget {
    		position: relative;
    		display: inline-block;
    		border-bottom: 2px solid #d0d0d0;
    	}
    	.cTipTarget .cToolTip {
    		visibility: hidden;
    		background-color: #d0d0d0;
    		color: #444444;
    		text-align: center;
    		border-radius: 10px;
    		padding: 5px 10px;
    		position: absolute;
    		z-index: 1;
    		bottom: 125%;
    		left: 50%;
    		margin-left: -30%;
    		opacity: 0;
    		transition: opacity 0.7s;
    	}
    	.cTipTarget .cToolTip::after {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: #d0d0d0 transparent transparent transparent;
    	}
    	.cTipTarget:hover .cToolTip {
    		visibility: visible;
    		opacity: 1;
    	}
    </style>
  </head>
  <body>
  	<h1>Placing a Tooltip</h1>
  	<div style="width:100px;height:50px;"></div>
  	<span class="cTipTarget">This line of text could really use a nice, clear tip.
  		<span class="cToolTip">This is a really good tip!</span>
  	</span>
  </body>
</html>

Core CSS

Tooltips

Tooltip.html

Output