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:

Head display
Show on the right
Bottom display
Show on the left

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: 1 px dotted black   ; /* Display dots and lines on hovering elements */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden

 

  
     ;
     width: 120 px ;
     background-color: black ;
     color: #fff ;
     text-align: center ;
     padding: 5 px 0  ;
     border-radius: 6 px ;
 
     /* Position */ position: absolute
     ;
     z-index: 1 ;
 } /*The prompt box is displayed after the mouse moves up */ .tooltip :hover .tooltiptext { visibility: visible
 

  
     ;
 }
</ style > < div class = " tooltip " > Move the mouse to this
   < span class = " tooltiptext " > prompt text </ span > </ div >

Example analysis

HTML) Use container elements (like <div>) and add the “tooltip” class. When the mouse moves over the <div>, a prompt 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.

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

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

The :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 that 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 should also be modified accordingly to ensure that it is center-aligned.

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

Example

.tooltip .tooltiptext { 
	Top: - . 5 PX ;
	left: 105 % ; 
}

Example

.tooltip .tooltiptext { 
	Top: - . 5 PX ;
	right: 105 % ; 
}

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, that is: width/2 (120/2 = 60).

Example

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

Example

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

Add arrow

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

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

Example

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

Example 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 align the arrows in the center.

Note: The 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 is 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:

Example

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

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

Example

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

Example

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

Fade-in effect

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

Example

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