Back
Tutorial on how to create a tooltip on hover using only CSS.
<div class="container">
<button>Hover me!</button>
<div class="tooltip">This is a tooltip</div>
</div>
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Now we'll style the button. We'll set colors and border radius to 20px.
Then add some paddings and cursor to pointer.
We'll set the z index to 1 so this element is on top of the "tooltip" element.
Lastly, transition, so that the hover effect, which we'll add later, is nice and smooth, and font size to 20 px.
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;
}
Button on hover will increase a bit.
Don't forget the transition.
button:hover {
transform: scale(1.1);
transition: 0.3s;
}
For tooltip, first, we'll set the opacity to zero. We'll set it to 1 later on button hover.
Now we'll set some basic styling (colors, border) and paddings and margins.
Then we'll set position to relative, scale to 0.1 with transition so that on hover it increases size smoothly.
.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;
}
Using before pseudo element, we'll create an arrow for tooltip that will point to button.
We'll create it by setting content and position to absolute.
We'll set width and height to 10px, and using clip path we'll create a triangle which we'll rotate by 45 degrees with transform rotate.
Then we'll align it on top of tooltip, using top and left properties.
.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;
}
Now we'll simply set tooltip's opacity to 1 on button hover, and scale to it's original size (1).
button:hover + .tooltip {
opacity: 1;
transform: scale(1) translateY(0px);
transition: 0.3s;
}
And that's it.
<div class="container">
<button>Hover me!</button>
<div class="tooltip">This is a tooltip</div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
/* Button */
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;
}
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 */
button:hover + .tooltip {
opacity: 1;
transform: scale(1) translateY(0px);
transition: 0.3s;
}
</style>
Thank you for reading this article.