<!DOCTYPE html> <html> <head> <title>CSS Tooltips</title> </head> <body> <style type="text/css"> .tooltip_top, .tooltip_bottom, .tooltip_left, .tooltip_right{ position:relative; display:inline-block; margin:25px 50px 20px; background-color:#0099da; color:#FFF; padding:7px 15px; border-radius:3px; } .tooltip_top .tooltiptext { visibility:hidden; width:120px; background-color:black; color:#fff; text-align:center; border-radius:2px; padding:5px 0; position:absolute; z-index:1; bottom:100%; left:50%; margin-left:-60px;} .tooltip_top:hover .tooltiptext {visibility:visible;} .tooltip_bottom .tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 2px; padding: 5px 0; position:absolute; z-index:1; top:100%; left:50%; margin-left:-60px; } .tooltip_bottom:hover .tooltiptext { visibility: visible; } .tooltip_left .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 2px; padding: 5px 0; position: absolute; z-index: 1; top:0px; right: 105%;} .tooltip_left:hover .tooltiptext { visibility: visible; } .tooltip_right .tooltiptext {visibility: hidden; width: 120px; background-color: black; color:#fff; text-align:center; border-radius:2px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 105%;} .tooltip_right:hover .tooltiptext { visibility: visible; } </style> <div style="text-align:center;"> <div class="tooltip_top">TOP TOOLTIP <span class="tooltiptext">Top Tooltip</span> </div> <div class="tooltip_bottom">BOTTOM TOOLTIP <span class="tooltiptext">Bottom Tooltip</span> </div> <div class="tooltip_left">LEFT TOOLTIP <span class="tooltiptext">Left Tooltip</span> </div> <div class="tooltip_right">RIGHT TOOLTIP <span class="tooltiptext">Right Tooltip</span> </div> </div> </body> </html>
Output :
Topic :
Tooltips
