CSS Tooltips provide a convenient method to showcase additional details when a user hovers the mouse pointer over an item.
Basic Tooltip Example
Let's generate a simple tooltip that displays when the mouse pointer hovers over an element.
See this example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">This is tooltip text</span>
</div>
</body>
</html>
By using tooltips, you can display the position of the tooltip information in four ways:
- Top of the element
- Left side of the element
- Right side of the element
- Bottom of the element
Top Tooltip
The upper tooltip indicates that when hovering the mouse pointer over the element, the tooltip details will appear at the top of the element.
See this example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to C# Programming</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>
Bottom Tooltip
The tooltip located at the bottom indicates that when the mouse cursor is placed over the element, the tooltip content will appear at the bottom of the element.
See this example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to C# Programming</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>
Left Tooltip
The tooltip positioned to the left indicates that when you hover your mouse over the element, the tooltip content will appear on the left side of the element.
See this example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to C# Programming</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>
Right Tooltip
The correct tooltip indicates that when the mouse cursor is positioned over the element, the tooltip details will appear to the right of the element.
See this example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong> Welcome to C# Programming</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>