How can I make a pure CSS tooltip appear on hover?
Asked on Sep 20, 2025
Answer
To create a tooltip using pure CSS, you can use the `:hover` pseudo-class to show additional content when hovering over an element. Here's a simple example of how you can achieve this.
<!-- BEGIN COPY / PASTE -->
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%; /* Position above the tooltip element */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltip-text">Tooltip text</span>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The `.tooltip` class is used to wrap the element that will trigger the tooltip.
- The `.tooltip-text` class is initially hidden and becomes visible on hover.
- Positioning is controlled using `position: absolute` and adjusted with `bottom` and `left` properties.
- Transitions can be used to animate the appearance of the tooltip smoothly.
Recommended Links: