CSS 工具提示 - 易学教程，面试笔记经验！

CSS 工具提示tooltip就像当您将鼠标悬停在网页上的某个元素上时出现的信息小框。

这些工具提示为您提供有关网页上特定元素的更多信息，仅当您将鼠标悬停在元素上。

创建工具提示

我们可以仅使用 CSS 和 HTML 创建工具顶部。
使用容器元素（例如 div）设置工具提示。
创建一个 div 元素并向其添加 CSS 类工具提示。
使用 .tooltiptext 类将工具提示文本放置在内联元素（例如 span）内。
当用户将鼠标指针移到容器元素上时，将显示 span 元素内的工具提示文本。

以下示例演示如何使用 CSS 创建工具提示。当用户将鼠标悬停在文本上时，将显示工具提示。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
   <h2>将鼠标悬停在下面的文本上即可查看工具提示</h2>
   <div class="tooltip">
    将鼠标悬停在该文本上
      <span class="tooltiptext">这是一个工具提示</span>
   </div>
</body>
</html>

在上面的示例中，position:relative;属性应用于 .tooltip 类。

.tooltip {
   position: relative;
}

.tooltiptext 类负责设置工具提示文本的样式。设置为display:none；默认情况下，使其隐藏。

当您将鼠标悬停在父元素 .tooltip 上时，此类将变得可见。

.tooltip {
      position: relative;
   }

:hover 伪类与 .tooltip 一起使用。 tooltip 类，使 .tooltiptext 类在用户将鼠标悬停在工具提示容器上时可见。

.tooltip:hover .tooltiptext {
      display: block; /* 悬停时显示工具提示文本 */
   }

定位工具提示

某些工具提示的任务是确定工具提示的位置并确保其稳定放置。

我们有四种使用工具提示显示元素的主要方法。

顶部工具提示
底部工具提示
右侧工具提示
左侧工具提示

顶部工具提示

此工具提示显示元素上方的信息。
当您将鼠标悬停时在某些指定元素上，工具提示出现在网页上该元素上方，显示工具提示文本。
这称为顶部工具提示。

以下示例演示如何创建将鼠标悬停在元素上时显示在元素顶部的工具提示。

<html>
<head>
   <style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
<h2>将鼠标悬停在文本上即可查看顶部工具提示</h2>
   <div class="tooltip">
   将鼠标悬停在该文本上
   <span class="tooltiptext">这是顶部工具提示</span>
   </div>
</body>
</html>

底部工具提示

此工具提示显示元素下方的信息。
当您将鼠标移到某个指定元素上时，工具提示会出现在网页上该元素的底部，显示工具提示的文本。
这称为底部工具提示。

以下示例演示了出现在底部工具提示的工具提示悬停在元素的底部。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
      <h2>底部工具提示示例</h2>
      <div class="tooltip">
         将鼠标悬停在该文本上
         <span class="tooltiptext">这是底部工具提示</span>
      </div>
</body>
</html>

右侧工具提示

此工具提示旨在在元素右侧显示信息。
当您将鼠标移动到某个指定元素上时，工具提示会出现在网页上该元素的右侧，并显示工具提示文本。
这称为右侧工具提示。

以下示例演示了当鼠标悬停在元素上时出现在元素右侧的工具提示。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 110%;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body>
<h2>右侧工具提示例子</h2>
<div class="tooltip">
   将鼠标悬停在该文本上
   <span class="tooltiptext">这是右侧的工具提示</span>
</div>
</body>
</html>

左侧工具提示

此工具提示旨在显示元素左侧的信息。
当您将鼠标移动到某个指定元素上时，工具提示会出现在网页上该元素的左侧，并显示工具提示文本。
这是已知的作为左侧工具提示。

以下示例演示了当鼠标悬停在元素上时出现在元素左侧的工具提示。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      right: 110%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
<body style="text-align:center;">
<h2>左侧工具提示例子</h2>
<div class="tooltip">
   将鼠标悬停在该文本上
   <span class="tooltiptext">这是左侧工具提示</span>
</div>
</body>
</html>

工具提示箭头

要在一侧创建工具提示箭头，我们使用伪元素类 ::after 以及 content 属性，在工具提示后添加空内容。

利用边框来制作工具提示箭头箭头，导致工具提示看起来像气泡。工具顶部箭头可以是顶部、底部、右侧和左侧，如以下部分所示。

顶部箭头工具提示

顶部箭头工具提示是指位于其元素下方的工具提示。与该元素关联。

它包括一个向上的箭头，指示工具提示和元素之间的连接。

以下示例显示出现在底部的顶部箭头工具提示鼠标悬停在元素上时指向该元素。

<html>
<head>
<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 50%;
  margin-left: -20px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>顶部箭头工具提示</h2>
<div class="tooltip">将鼠标悬停在该文本上
  <span class="tooltiptext">这是带有顶部箭头的工具提示文本</span>
</div>
</body>
</html>

底部箭头工具提示

底部箭头工具提示是指位于与该元素关联的元素上方的工具提示。

它包括一个向下的箭头，指示工具提示和元素之间的连接。

以下示例显示了一个底部箭头工具提示，当悬停在上面。

<html>
<head>
<style>
.tooltip {
   position: relative;
   display: inline-block;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 150px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -70px;
} 
.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 7px;
   border-style: solid;
   border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>底部箭头工具提示</h2><br/><br/>
<div class="tooltip">将鼠标悬停在该文本上
   <span class="tooltiptext">这是底部箭头工具提示文本</span>
</div>
</body>
</html>

右箭头工具提示

右箭头工具提示是指位于与该元素关联的元素左侧的工具提示。

它包括一个向右的箭头，指示工具提示和元素之间的连接。

以下示例演示了一个右箭头工具提示，当鼠标悬停在元素上时，该工具提示出现在指向该元素的元素的左侧。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 150px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -5px;
      right: 110%;
   }
   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 35%;
      left: 100%;
      margin-top: -5px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent transparent transparent black;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body style="text-align:center;">
<h2>右箭头工具提示</h2>
<div class="tooltip">将鼠标悬停在该文本上
   <span class="tooltiptext">这是右箭头工具提示文本</span>
</div>
</body>
</html>

左箭头工具提示

左箭头工具提示是指位于与该元素关联的元素右侧的工具提示。

它包含一个箭头向左指示工具提示和元素之间的连接。

以下示例演示了一个左箭头工具提示，当鼠标悬停在元素上时，该工具提示出现在指向该元素的元素的右侧。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 140px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 110%;
      }
   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 30%;
      right: 100%;
      margin-top: -5px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent black transparent transparent;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body style="text-align:center;">
<h2>左箭头工具提示</h2>
<div class="tooltip">将鼠标悬停在该文本上
   <span class="tooltiptext">这是左箭头工具提示文本</span>
</div>
</body>
</html>

淡入工具提示

CSS 淡入工具提示或工具提示动画是一种以淡入淡出效果逐渐出现的工具提示，创建平滑且具有视觉吸引力的过渡。

实现淡入淡出在 CSS 的工具提示中，您可以结合使用 CSS 过渡和不透明度属性。

以下示例演示了淡入工具提示。当您将鼠标悬停时，会出现一个工具提示。工具提示将平滑淡入，并具有过渡效果。

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 2s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body style="text-align:center;">
<h2>淡入工具提示示例</h2> <br/> <br/>
<div class="tooltip">
   将鼠标悬停在该文本上
   <span class="tooltiptext">这是一个淡入工具提示</span>
</div>
</body>
</html>

工具提示的优点

工具提示可以提供额外的信息，而不会使网页变得混乱。它们帮助用户更好地理解网页的不同部分。
CSS 工具提示可以自定义，并针对不同的屏幕和设备放置在不同的位置。这使得它们对所有类型的网站都很有用，甚至是那些在不同屏幕上改变尺寸的网站。
CSS 工具提示是高度可定制的，它允许开发人员设置它们的样式以匹配网站的设计主题，包括颜色、字体和动画。
实现 CSS 工具提示相对简单，不需要复杂的 JavaScript 或额外的库。

CSS 工具提示 tooltip