CSS Tooltip

In this article, we introduce how to create tooltips using HTML and CSS.

The tooltip is triggered when the mouse moves over the specified element. First, look at the following four examples:

Display at the topTooltip text
Display on the rightTooltip text
Display at the bottomTooltip text
Display on the leftTooltip text

Basic Tooltip

The tooltip is displayed when the mouse moves over the specified element:

HTML code:

<style>
/*Tooltip Container*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /*Display dotted line on the hovered element*/ } /*Tooltip Text*/ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /*Positioning*/ position: absolute; z-index: 1; } /*Show tooltip on mouse hover*/ .tooltip:hover .tooltiptext { visibility: visible; }
</style> <div class="tooltip">Move the mouse here<span class="tooltiptext">Tooltip text</span> </div>

Try it Yourself »

Example analysis

HTML)Use a container element (like <div>) and add"tooltip"class. When the mouse moves over the <div>, the tooltip information is displayed.

Place the tooltip text in an inline element (such as <span>) and useclass="tooltiptext"。

CSS)tooltipClass usageposition:relative, the tooltip text needs to be set with a positioning value.position:absolute。 Note:The following examples will show more positioning effects.

tooltiptextclass for the actual tooltip text. It is hidden by default, and is displayed when the mouse moves over the element. Some styles such as width, background color, font color, etc. are set.

CSS3 border-radiusThe property is used to add rounded corners to the tooltip.

:hoverThe selector is used to display the tooltip when the mouse moves over the specified element <div>.

Positioning Hint Tool

In the following example, the tooltip is displayed on the right side of the specified element (left:105%) 。

Notetop:-5pxIt is the same as positioning in the center of the container element. Use the number5Because the top and bottom padding of the tooltip text is 5px.

If you modify the padding value, the top value should also be modified accordingly, so that it can be ensured to be center-aligned.

The same principle applies when the tooltip is displayed on the left side.

Display on the right:

.tooltip .tooltiptext { top: -5px; left: 105%; }

Try it Yourself »

Display on the left:

.tooltip .tooltiptext { top: -5px; right: 105%; }

Try it Yourself »

If you want the tooltip to be displayed at the top and bottom, we need to use.margin-leftproperty, and set it to -60px. This number is calculated by using half of the width to center-align, i.e., width/2 (120/2 = 60).

Display at the top:

.tooltip .tooltiptext { width: 120px; bottom: 100%; left: 50%; margin-left: -60px; /*Use half the width (120/2 = 60) to center the tooltip*/ }

Try it Yourself »

Display at the bottom:

.tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /*Use half the width (120/2 = 60) to center the tooltip*/ }

Try it Yourself »

Add arrow

We can use the CSS pseudo-element ::after and the content attribute to create a small arrow for the tooltip. The arrow is composed of borders, but when combined, the tooltip looks like a speech bubble.

The following example demonstrates how to add a bottom arrow to a tooltip displayed at the top:

Top tooltip / bottom arrow:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /*Tooltip bottom*/ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }

Try it Yourself »

Example analysis

Position the arrow inside the tooltip:top: 100%, the arrow will be displayed at the bottom of the tooltip.left: 50%Used to center-align the arrow.

Note:border-widthThe property specifies the size of the arrow. If you modify it, you also need to modifymargin-leftvalue. This way the arrow can be centered.

border-colorUsed to convert the content into an arrow. Set the top border to black, and the others to transparent. If the others are also set to black, it will display as a black quadrilateral.

The following example demonstrates how to add an arrow to the top of the tooltip. Note the border color settings:

Bottom tooltip / top arrow:

.tooltip .tooltiptext::after { content: " "; position: absolute; bottom: 100%; /*Tooltip header*/ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }

Try it Yourself »

The following two examples are arrow examples for the left and right sides:

Right tooltip / left arrow:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 50%; right: 100%; /*Tooltip left side*/ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; }

Try it Yourself »

Left tooltip / right arrow:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 50%; left: 100%; /*Tooltip right side*/ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; }

Try it Yourself »

Fade-in effect

We can use the CSS3 transition property and the opacity property to achieve a fade-in effect for the tooltip:

Fade-in effect:

.tooltip .tooltiptext { opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { opacity: 1; }

Try it Yourself »

More Examples

Beautiful CSS Tooltip

other extensions