DEV Community

loading...
Cover image for My WebDev Notes: How to create a tooltip with HTML and CSS

My WebDev Notes: How to create a tooltip with HTML and CSS

ziizium profile image Habdul Hazeez ・3 min read

Introduction

A tooltip is a common graphical user interface element found on some websites. It's used to provide additional information to the user when they interact with a portion of text with their mouse or by touch. In this tutorial, you'll learn how to create it with HTML and CSS.

The HTML

The tooltip text is contained within a portion of other text on a web page, most of the time, this text is a paragraph therefore, the HTML span tag is used to enclose it.

<!-- Do not forget the meta tags -->
<div class="tooltip">
    Hover over me <span class="tooltiptext">This is a tooltip</span>
</div>
Enter fullscreen mode Exit fullscreen mode

The CSS

In the HTML above the tooltip text is part of the flow of the text which means when it's rendered by the browser it will appear beside the text "Hover over me". The desired effect is to hide the text, and show it over the text Hover over me when the user interact with it.

In order to achieve this, you have to hide the tooltip text; take it out of flow before you can position it over the text: Hover over me.

First, you have to change the position property of the tooltip parent container to relative because when you take the tooltip text out of flow, you'll have to position it relative to its parent and not the browser's viewport. In addition, you'll add a bottom border to serve as an indication that there is an information hidden from sight.

Furthermore, the display property is changed to inline-block. This prevents the tooltip parent from spanning the entire browsers' viewport.

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
Enter fullscreen mode Exit fullscreen mode

Now, you can position the tooltip text. Since the parent container has a position relative, the tooltip text can have its position set to absolute. Therefore, you can use offset properties to accurately position it over the text Hover over me. Finally, you'll like the tooltip text to appear over its parent text all the time, z-index takes care of this. The remaining styles are cosmetics.

.tooltip .tooltiptext {
    position: absolute;
    bottom: 125%;
    left: 50%;
    visibility: hidden;
    z-index: 1;

    /* Cosmetics */
    color: #fff;
    background-color: #555;
    width: 120px;
    text-align: center;
    padding: 5px 0;
    margin-left: -60px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 1s;
}
Enter fullscreen mode Exit fullscreen mode

In its current state, the tooltip is hidden, but before you write styles that will show it when the user interacts with it, you need to create a tiny indication that'll show the user that the tooltip text belongs to the text Hover over me, sort of like when a human is holding a board which reads: I am human.

In order to achieve this, you'll use CSS pseudo-elements specifically ::after.

.tooltip .tooltiptext::after {
    /* Read on for the code and explanation */
}
Enter fullscreen mode Exit fullscreen mode

First, you set its content to empty, and change the position to absolute. Afterwards, you move the indicator to the center of the tooltip text and its parent text. Next, you use borders to create the indicators. Finally, when the user touches the text or mouse over it, you change the visibility and opacity to visible and 1 respectively.

.tooltip .tooltiptext::after {
    position: absolute;
    content: "";

    /* Move it to the center */
    top: 100%;
    left: 50%;

    /* This creates the indicators */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent;
}

/**
 * Show the tooltip when you mouse over the
 * tooltip container
 */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

The completed tooltip is shown in the GIF below:

A GIF of a tooltip which reads: This is a tooltip

You can check it online.

The GitHub repo for this series:

GitHub logo ziizium / my-webdev-notes

Code snippets for series of articles on DEV about my experiments in web development

My WebDev Notes

This repositiory contains code snippets for series of articles on DEV about my experiments in Web development.

List of articles

Credits

Cover photo by Ferenc Almasi on Unsplash.

Discussion (5)

pic
Editor guide
Collapse
leanderd profile image
Leander Dirkse

Nice post! One question though: is there a specific reason you didn't use an attribute with the tooltip text and attr to grab that text for the content?

Collapse
ziizium profile image
Habdul Hazeez Author

I never thought of that 🙃.

If you have the time to provide the code for that, I'll really appreciate it, afterwards, I'll update the post with your comment.

Collapse
leanderd profile image
Leander Dirkse

I will send you an example in a bit!

Collapse
leanderd profile image
Leander Dirkse

Here is an example: jsfiddle.net/xt8zvapc/

I tried to keep it the same as yours as much as possible.

Thread Thread
ziizium profile image
Habdul Hazeez Author

Hello, good day to you, and thanks for your patience.

Your technique worked, but it did not pass W3 markup validation service because you used a tooltip attribute in your HTML which works but not allowed at the time of writing (see the image below).

W3 validation error for tooltip attribute

I changed the tooltip attribute to data-tooltip in the HTML, and it passed the validation test because data attributes are allowed on an element like div.

If you can find time, kindly update the fiddle using data-tooltip in your HTML, and update the CSS accordingly.

Let me know when you are done, I'll update the post as soon as possible.

Once again, thanks for your contribution and patience (I still can't believe it's over a month 😱).