CSS Tooltip

CSS Tooltip:

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element

Example

<!DOCTYPE html>

<html>

<style>

.tooltip

{ position: relative;

display: inline-block;

border-bottom: 2px dotted black; }

.tooltip .tooltiptext

{ visibility: hidden;

width: 120px;

background-color: black;

color: #fff; text-align: center;

border-radius: 6px; padding: 6px 0;

/* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }

</style>

<body style=”text-align:center;”>

<p>Move the mouse pointer over the text below:</p>

<div class=”tooltip”>Hover over me <span class=”tooltiptext”>Tooltip text</span> </div>

<p>Note that the position of the tooltip text isn’t very goodwe can manage position the tooltip in an desirable way.</p>

</body>

</html>

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *