Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a CSS-only tooltip that appears on hover?
Asked on Mar 06, 2026
Answer
To create a CSS-only tooltip that appears on hover, you can use the `:hover` pseudo-class to display a hidden element. This involves positioning the tooltip text relative to the element it describes.
<!-- BEGIN COPY / PASTE -->
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%; /* Position the tooltip above the text */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `.tooltip` class is used to wrap the element that will trigger the tooltip.
- The `.tooltiptext` class is initially hidden and becomes visible on hover.
- Positioning is achieved using `position: absolute` for the tooltip text, and `position: relative` for the parent.
- Transitions are used for a smooth fade-in effect.
Recommended Links:
