Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set bottom tooltip with CSS
To create a bottom tooltip with CSS, use the top property set to 100% along with position: absolute. This positions the tooltip below the trigger element when hovered.
Syntax
.tooltip .tooltip-text {
position: absolute;
top: 100%;
visibility: hidden;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
Example
The following example creates a bottom tooltip that appears when you hover over the text −
<!DOCTYPE html>
<html>
<head>
<style>
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -70px;
margin-top: 5px;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
</head>
<body>
<div class="mytooltip">Keep mouse cursor over me
<span class="mytext">My Tooltip text</span>
</div>
</body>
</html>
A gray box with text "Keep mouse cursor over me" appears. When you hover over it, an orange tooltip with white text "My Tooltip text" appears below the box.
Key Points
- Use
top: 100%to position the tooltip below the trigger element - Set
position: absoluteon the tooltip andposition: relativeon the container - Use
visibility: hidden/visibleto control tooltip display on hover - Center the tooltip horizontally using
left: 50%and negativemargin-left
Conclusion
Bottom tooltips are created by positioning the tooltip element at top: 100% relative to its container. The hover pseudo-class toggles visibility to show and hide the tooltip effectively.
Updated on: 2026-03-15T12:31:09+05:30
794 Views
Advertisements