CSS Introduction | Advanced CSS | Tooltip Effect

Tags:

An effect that shows additional information when the user hovers over an element is called a tooltip effect.
With CSS, you can set up this kind of tooltip effect easily.

The following example implements a tooltip effect by using the visiblility property.

<style>
    .tooltip { position: relative; display: inline-block; }
    .tooltip .tooltip-content {
        visibility: hidden;
        width: 300px;
        background-color: orange;
        padding: 0;
        margin-top: 10px;
        color: white;
        text-align: center;
        position: absolute;
        z-index: 1;
    }
    .tooltip:hover .tooltip-content { visibility: visible; }
</style>

With CSS, you can also set where the tooltip appears.
You can set the relative position of a tooltip by using the top, right, bottom, and left properties, which represent relative positions in CSS.

The following example implements a tooltip so that it appears on the left side of the element instead of below it.

<style>
    .tooltip { margin: auto; }
    .tooltip .tooltip-content { top: -15px; right: 105%; }
</style>

The following example implements a tooltip so that it appears above the element when the user hovers over it.

<style>
    .tooltip { margin: auto; }
    .tooltip .tooltip-content { bottom: 100%; left: 50%; margin-left: -150px; }
</style>

You can also set the shape of a tooltip to look like a speech bubble, as shown in the following example.

<style>
    .tooltip .tooltip-content::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -10px;
        border-width: 10px;
        border-style: solid;
        border-color: orange transparent transparent transparent;
    }
</style>

In the example above, the speech-bubble shape of the tooltip can be implemented by setting the border-color value to transparent.

The transparent value means transparent.

CSS Introduction | Advanced CSS | Tooltip Effect

Tooltip effect