Introduction to CSS Tooltip (detailed explanation)

2. Positioning prompt tool

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

Note that top:-5px is the same as being positioned in the middle of the container element. Use the number 5 because the top and bottom padding of the tooltip text is 5px.

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

This is also the case when the prompt box is displayed on the left.

Display on the right:

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

Display on the left:

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

If you want the tooltip to display in the header and bottom. We need to use the margin-left attribute and set it to -60px. This number is calculated using half the width for center alignment, which is: width/2 (120/2 = 60).

Displayed at the head:

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

Displayed at the bottom:

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

3. Add Arrow

We can use CSS pseudo-element::after and content attributes to create a small arrow sign for the tool tip. The arrow is composed of a border, but when combined, the tool tool looks like a voice. information.

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

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

Example analysis

Positioning the arrow within the tooltip: top: 100% , arrow will appear at the bottom of the tooltip. left: 50% is used to center align the arrow.

Note: The border-width attribute specifies the size of the arrow. If you modify it, also modify the margin-left value. This way the arrow can be displayed centered.

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

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

Bottom prompt box/top arrow:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* 提示工具头部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

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

Right prompt box/left arrow:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* 提示工具左侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

Left prompt box/right side Arrow:

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* 提示工具右侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

4. Fade-in effect

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

Left prompt box/right arrow:

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

5. Code example:

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

Rendering: