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