Introduction to CSS Tooltip (detailed explanation)

This chapter brings you CSS Tooltip introduction (detailed explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The prompt tool is triggered after the mouse moves to the specified element, and can be displayed in four directions: head display, right display, left display, and bottom display.

1. Basic prompt box (Tooltip)

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

/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

Example analysis

HTML) Use container elements (like

) and add the "tooltip" class. Show tooltip when mouse moves over

.

Put the tooltip text on an inline element (such as ) and use class="tooltiptext".

CSS)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 tooltip text. The modal is hidden and appears when the mouse is moved over the element. Some width, background color, font color and other styles are set.

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

:hover selector is used to display the prompt when the mouse moves over the specified element

.

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:

The above is the detailed content of Introduction to CSS Tooltip (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!