Css 简明教程

CSS - Tooltips

CSS tooltips 就像小盒子装的信息，当鼠标悬停在网页中的某些元素上时会出现。

这些 tooltips 当仅当你鼠标悬停在某个元素上时，才会给你关于网页上特定元素的更多信息。

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

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

<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>Hover over the text below to see the tooltip</h2>
   <div class="tooltip">
    Hover over this text
      <span class="tooltiptext">This is a tooltip</span>
   </div>
</body>
</html>

在上面的示例中， position: relative; 属性应用于 .tooltip 类。这样可以让具有 position: absolute; 的子元素相对于提示容器定位。

.tooltip {
   position: relative;
}

.tooltiptext 类负责为提示文本设置样式。默认情况下它被设置为 display: none; ，使其处于隐藏状态。

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

   .tooltip {
      position: relative;
   }

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

   .tooltip:hover .tooltiptext {
      display: block; /* Show the tooltip text on hover */
   }

Positioning Tooltips

某些提示具有确定提示位置并确保位置稳定的任务。

我们有四种通过提示显示元素的主要方法。

Top Tooltip
Bottom Tooltip
Right Tooltip
Left Tooltip

此提示显示元素上方的信息。
当您将鼠标悬停在某些指定元素上时，提示会出现在网页上元素的正上方，显示提示文字。
这被称为 top tooltip 。

以下示例演示如何创建在鼠标悬停时出现在元素顶部的提示。

<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>Hover over the text to see the top tooltip</h2>
   <div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a top tooltip</span>
   </div>
</body>
</html>

此提示显示元素下方的信息。
当您将鼠标悬停在某些指定元素上时，提示会出现在网页上元素的正下方，显示提示文字。
这被称为 bottom tooltip 。

以下示例演示鼠标悬停时出现在元素底部的 tooltip 。

<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>Bottom Tooltip Example</h2>
      <div class="tooltip">
         Hover over this text
         <span class="tooltiptext">This is a bottom tooltip</span>
      </div>
</body>
</html>

此提示旨在显示元素右侧的信息。
当您将鼠标悬停在某些指定元素上时，提示会出现在网页上元素的右侧，显示提示文字。
这被称为 right tooltip 。

以下示例演示了在悬停时出现在元素右侧的 tooltip 。

<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>Right Tooltip Example</h2>
<div class="tooltip">
   Hover over this this text
   <span class="tooltiptext">This is a right tooltip</span>
</div>
</body>
</html>

此工具提示旨在显示元素左侧的信息。
当您将鼠标悬停在某个指定元素上时，工具提示将出现在网页上该元素的左侧，显示工具提示的文本。
这称为 left tooltip 。

以下示例演示了在悬停时出现在元素左侧的 tooltip 。

<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>Left Tooltip Example</h2>
<div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a left tooltip</span>
</div>
</body>
</html>

要在一侧创建工具提示箭头，我们在工具提示后使用伪元素类 ::after *along with the content property, adding *empty 内容。

边框用于制作箭头，从而形成类似于文字气泡的工具提示。工具提示箭头可以是顶部、底部、右侧和左侧，如下节所示。

top arrow tooltip 指的是位于与其关联元素下方位置的工具提示。

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

以下示例显示了 top arrow tooltip ，它出现在元素底部，在鼠标悬停时指向该元素。

<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>Top Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
  <span class="tooltiptext">This is Tooltip text with top arrow</span>
</div>
</body>
</html>

bottom arrow tooltip 指的是位于与其关联元素上方位置的工具提示。

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

以下示例显示了 bottom arrow tooltip ，它出现在元素顶部，在鼠标悬停时指向该元素。

<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>Bottom Arrow Tooltip</h2><br/><br/>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Bottom arrow tooltip text</span>
</div>
</body>
</html>

Right arrow tooltip 指的是位于与其关联元素左侧位置的工具提示。

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

以下示例演示了 right arrow tooltip ，它出现在元素左侧，在鼠标悬停时指向该元素。

<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>Right Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Right Arrow Tooltip text</span>
</div>
</body>
</html>

left arrow tooltip 指的是位于与其关联元素右侧位置的工具提示。

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

以下示例演示了 left arrow tooltip ，它出现在元素右侧，在鼠标悬停时指向该元素。

<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>Left Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Left Arrow Tooltip text</span>
</div>
</body>
</html>

Fade in tooltips

CSS Fade in tooltip 或 tool tip animation 是一个会逐渐淡入显示的工具提示，它能创建平滑且赏心悦目的过渡。

要使用 CSS 实现 Fade in tooltip ，您可以使用 CSS 过渡和透明度属性的组合。

以下示例演示了一个 fade-in tooltip 。当您悬停时，将出现一个工具提示。该工具提示将平滑淡入显示，并带有过渡效果。

<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>Fade-in Tooltip Example</h2> <br/> <br/>
<div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a fade-in tooltip</span>
</div>
</body>
</html>

Advantages of Tooltips

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

Css 简明教程

CSS - Tooltips

Creating Tooltip

Positioning Tooltips

Top Tooltip

Bottom Tooltip

Right Tooltip

Left Tooltip

Tooltip Arrows

Top Arrow Tooltip

Bottom Arrow Tooltip

Right Arrow Tooltip

Left Arrow Tooltip

Fade in tooltips

Advantages of Tooltips