Tooltip on hover - A step-by-step guide

HTML

For HTML, we only need a container with button and div element with "tooltip" class and text inside.

<div class="container">
    <button>Hover me!</button>
    <div class="tooltip">This is a tooltip</div>
</div>

CSS

For CSS, first we'll align everything using flexbox.

.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.

You can find full code with video tutorial here.

Thank you for reading this article. ❤️