Back
Learn how to implement a smooth, animated tooltip with a directional pointer using pure CSS and no JavaScript.
<div class="tooltip-container">
<button class="tooltip-button">Hover me!</button>
<div class="tooltip">This is a tooltip</div>
</div>
.tooltip-container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Now we'll style our button to create an attractive, interactive element. We're using a semi-transparent black background with a bright teal border for a modern look.
The generous border-radius of 20px creates a pill-shaped button, while the padding ensures it's large enough to be a comfortable target for users.
We set z-index to 1 to ensure proper layering with our tooltip, and add a smooth 0.3-second transition to all properties for fluid animations.
.tooltip-button {
background-color: rgba(0, 0, 0, 0.652);
border: 1px solid rgba(117, 255, 211, 0.928);
border-radius: 20px;
padding: 10px 50px;
color: rgba(117, 255, 211, 0.928);
cursor: pointer;
z-index: 1;
transition: 0.3s;
font-size: 20px;
}
When users hover over the button, we'll add a subtle scaling effect that makes the button appear to rise slightly toward the user, enhancing the interactive feel.
.tooltip-button:hover {
transform: scale(1.1);
transition: 0.3s;
}
For the tooltip itself, we start with opacity set to 0 and a scaled-down, translated position so it's initially invisible.
We apply a semi-transparent teal background that complements the button styling, with soft rounded corners via border-radius.
The transform property combines scaling and vertical translation to create a starting point for our entrance animation.
.tooltip {
opacity: 0;
background-color: rgba(0, 110, 75, 0.404);
border-radius: 10px;
padding: 5px 15px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.652);
position: relative;
transform: scale(0.1) translateY(-50px);
transition: 0.3s;
}
To create the directional pointer that connects the tooltip to our button, we'll use the ::before pseudo-element with some clever CSS.
Instead of using traditional border techniques for the triangle, we're using the modern clip-path property to precisely create our triangle shape.
We position this element absolutely at the top center of our tooltip and use transform to fine-tune its position and rotation.
.tooltip::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(0, 110, 75, 0.404);
clip-path: polygon(0 0, 0% 86%, 86% 0);
border-radius: 1px;
top: 0;
left: 50%;
transform: translate(-50%, -4px) rotate(45deg);
transition: 0.3s;
}
Finally, we use the adjacent sibling combinator (+) to target the tooltip when the button is hovered.
When triggered, we animate the tooltip to full opacity and its intended size and position with a smooth transition.
The transform property reverses our initial settings, bringing the tooltip into view with a subtle animation that draws the user's attention.
.tooltip-button:hover + .tooltip {
opacity: 1;
transform: scale(1) translateY(0px);
transition: 0.3s;
}
This technique creates a polished, accessible tooltip that enhances your UI without requiring any JavaScript, keeping your implementation lightweight and performant.
<div class="tooltip-container">
<button class="tooltip-button">Hover me!</button>
<div class="tooltip">This is a tooltip</div>
</div>
<style>
.tooltip-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
/* Button */
.tooltip-button {
background-color: rgba(0, 0, 0, 0.652);
border: 1px solid rgba(117, 255, 211, 0.928);
border-radius: 20px;
padding: 10px 50px;
color: rgba(117, 255, 211, 0.928);
cursor: pointer;
z-index: 1;
transition: 0.3s;
font-size: 20px;
}
.tooltip-button:hover {
transform: scale(1.1);
transition: 0.3s;
}
/* Tooltip */
.tooltip {
opacity: 0;
background-color: rgba(0, 110, 75, 0.404);
border-radius: 10px;
padding: 5px 15px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.652);
position: relative;
transform: scale(0.1) translateY(-50px);
transition: 0.3s;
}
.tooltip::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(0, 110, 75, 0.404);
clip-path: polygon(0 0, 0% 86%, 86% 0);
border-radius: 1px;
top: 0;
left: 50%;
transform: translate(-50%, -4px) rotate(45deg);
transition: 0.3s;
}
/* Tooltip on hover */
.tooltip-button:hover + .tooltip {
opacity: 1;
transform: scale(1) translateY(0px);
transition: 0.3s;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!