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

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>

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;
}

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;
}

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 */
}

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;
}

The completed tooltip is shown in the GIF below:

You can check it online.

The GitHub repo for this series:

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, and links for series of articles on DEV about my experiments in Web development.

List of articles

• My WebDev Notes: CSS Loaders published on the 25^th February 2020
• My WebDev Notes: Filter table published on the 1^st April 2020
• MyWebDev Notes: Center page elements with CSS Grid published on the 3^rd of April 2020
• My WebDev Notes: Photo gallery with CSS Grid published on the 7^th of April 2020
• My WebDev Notes: Fullscreen overlay navigation published on the 13^th of April 2020
• My WebDev Notes: A simple and accessible accordion published on 28^th of April 2020
• My WebDev Notes: How to create a tooltip with HTML and CSS published on 3^rd February 2021
• How to create a modal published on 22^nd June 2021

View on GitHub

Credits

Cover photo by Ferenc Almasi on Unsplash.

Comments

[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?

[Habdul Hazeez]

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.

[Leander Dirkse]

I will send you an example in a bit!

[Leander Dirkse]

Here is an example: jsfiddle.net/xt8zvapc/

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

[Habdul Hazeez]

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

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