DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

Tooltip on hover - A step-by-step guide

Tooltip

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>
Enter fullscreen mode Exit fullscreen mode

CSS

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

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Button on hover will increase a bit.
Don't forget the transition.

button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find full code with video tutorial here.

Thank you for reading this article. ❤️

Top comments (0)