CSS Tooltip


In this article, we will show you how to use HTML and CSS to create tooltips.

The prompt tool is triggered after the mouse is moved to the specified element. First look at the following four examples:

image.png


Basic Tooltip


The prompt box is displayed when the mouse is moved to the specified element:

Example

<style>
/* Tooltip container */
.tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 1px dotted black; /* Display dotted lines on hovering elements */
}
 
/* Tooltip text */
.tooltip .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: black;
     color: #fff;
     text-align: center;
     padding: 5px 0;
     border-radius: 6px;
 
     /* position */
     position: absolute;
     z-index: 1;
}
 
/* After the mouse moves up, a prompt box will be displayed */
.tooltip:hover .tooltiptext {
     visibility: visible;
}
</style>
 
<div class="tooltip">Move the mouse here
   <span class="tooltiptext">tip text</span>
</div>

 Try It! 

Analysis

HTML - Use container elements (like <div>) and add the "tooltip" class. When the mouse moves to the <div>, a tooltip message is displayed.

Place the tip text on inline elements (such as <span>) and use class="tooltiptext" .

CSS - The tooltip class uses position:relative , and the prompt text needs to set the positioning value position:absolute . Note: The following examples will show more positioning effects.

tooltiptext class is used for the actual tip text. The mode is hidden and displayed when the mouse is moved to the element. Set some styles such as width, background color, font color, etc.

border-radius property (CSS3) is used to add rounded corners to the prompt box.

:hover selector is used to display the hint when the mouse moves to the specified element <div>.


Positioning Tool

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

Note: top:-5px is the same as positioning in the middle of the container element. Use the number 5 because the padding at the top and bottom of the prompt text is 5px.

If you modify the value of padding, the top value must also be modified accordingly, so as to ensure that it is center-aligned.

The same principle applies when the prompt box is displayed on the left.

Show on the right:

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

 Try It! 

Show on the left:

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

 Try It! 

If you want the tooltip to be displayed on the head and bottom. We need to use the margin-left property and set it to -60px. The source of this number calculation is to use half of the width for center alignment, width/2 (120/2 = 60).

Show in the head:

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

 Try It! 

Show 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! 


Add An Arrow

We can use CSS pseudo-element ::after and content attributes to create a small arrow sign for the tooltip. The arrow is composed of a border, but the prompt tool is like a voice message box when they are combined.

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

Top tiptip / Bottom arrow:

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

 Try It! 

Analysis

Position the arrow in the tooltip: top: 100% , the arrow will be displayed at the bottom of the tooltip. left: 50% is used to center the arrow.

Note: border-width property specifies the size of the arrow. If you modify it, also modify the margin-left value. In this way, the arrow can be displayed in the center.

border-color used to convert content into arrows. Set the top border to black and the others to be transparent. If the other is set to be black, it will be displayed as a black quadrilateral.

The following example demonstrates how to add an arrow to the head of the tooltip, pay attention to setting the border color:

Bottom tooltip / Top arrow:

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

 Try It! 
The following two examples are examples of arrows on the left and right sides:

Right tooltip / Left arrow:

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

 Try It! 

Left tooltip / Right arrow:

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

 Try It! 


Fade-in effect

We can use the CSS3 transition property and opacity property to achieve the fade-in effect of the prompt tool:

Fade in effect:

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

 Try It! 


More Examples

Beautiful CSS prompt box