Css 简明教程

CSS - Tooltips

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

CSS tooltips are like little boxes of information that appear when you hover the mouse over some element on a webpage.

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

These tooltips give you more information about a specific element on a web page, only when you hover over an element.

We can create tooltops using only CSS and HTML.
Set up a tooltip using a container element, such as div.
Create a div element and add a CSS class tooltip to it.
Place the tooltip text inside an inline element, such as span, using class .tooltiptext.
When the user moves the mouse pointer over the container element, the tooltip text inside the span element is displayed.

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

The following example demonstrates how to create tooltips using CSS. The tooltip is displayed when the user hovers over the text.

<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; 的子元素相对于提示容器定位。

In the above example , the position: relative; property is applied to the .tooltip class. It allows child elements with position: absolute; to be positioned relative to the tooltip container.

.tooltip {
   position: relative;
}

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

The .tooltiptext class is responsible for styling the tooltip text. It is set to display: none; by default, making it hidden.

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

When you hover over the parent element .tooltip, this class will become visible.

   .tooltip {
      position: relative;
   }

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

The :hover pseudo-class is used along with the .tooltip class to make the .tooltiptext class visible when the user hovers over the tooltip container.

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

Positioning Tooltips

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

Some tooltips have the task of determining the position of the tooltip and ensuring stable placement.

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

We have four main ways for displaying elements using tooltips.

Top Tooltip
Bottom Tooltip
Right Tooltip
Left Tooltip

This tooltip shows information above the element.
When you hover the mouse over some specified element, the tooltip appears above that element on the webpage, displaying text of tooltip.
This is known as top tooltip.

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

The following example demonstrates how to create tooltips that appear at the top of an element when hovered over.

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

This tooltip shows information below the element.
When you move the mouse over some specified element, the tooltip appears at the bottom of that element on the webpage, displaying text of tooltip.
This is known as bottom tooltip.

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

The following example demonstrates a tooltip that appears at the bottom of an element when hovered over.

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

This tooltip is designed to show information to the right of the element.
When you move the mouse over some specified element, the tooltip appears on the right side of that element on the webpage, displaying text of tooltip.
This is known as right tooltip.

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

The following example demonstrates a tooltip that appears on the right side of an element when hovered over.

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

This tooltip is designed to show information to the left of the element.
When you move the mouse over some specified element, the tooltip appears on the left side of that element on the webpage, displaying text of tooltip.
This is known as left tooltip.

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

The following example demonstartes a tooltip that appears on the left side of an element when hovered over.

<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 内容。

To create a tooltip arrow on one side, we use the pseudo-element class ::after *along with the content property, adding *empty content after the tooltip.

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

Borders are utilized to craft the arrow, resulting in a tooltip that looks like a speech bubble. Tooltop arrows can be top, botton, right and left as demonstarted in the following sections.

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

A top arrow tooltip refers to a tooltip that is positioned below the element it is associated with that element.

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

It includes an arrow pointing upwards to indicate the connection between the tooltip and the element.

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

The following example shows a top arrow tooltip that appears at the bottom of an element pointing the element when hovered over.

<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 指的是位于与其关联元素上方位置的工具提示。

A bottom arrow tooltip refers to a tooltip that is positioned above the element it is associated with that element.

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

It includes an arrow pointing downwards to indicate the connection between the tooltip and the element.

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

The following example shows a bottom arrow tooltip that appears at the top of an element pointing the element when hovered over.

<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 指的是位于与其关联元素左侧位置的工具提示。

A Right arrow tooltip refers to a tooltip that is positioned left side of the element it is associated with that element.

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

It includes an arrow pointing right to indicate the connection between the tooltip and the element.

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

The following example demonstrates a right arrow tooltip that appears at the left of an element pointing the element when hovered over.

<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 指的是位于与其关联元素右侧位置的工具提示。

A left arrow tooltip refers to a tooltip that is positioned right side of the element it is associated with that element.

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

It includes an arrow pointing left to indicate the connection between the tooltip and the element.

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

The following example demonstrates a left arrow tooltip that appears at the right of an element pointing the element when hovered over.

<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 是一个会逐渐淡入显示的工具提示，它能创建平滑且赏心悦目的过渡。

The CSS Fade in tooltip or tool tip animation is a tooltip that appears gradually with a fading effect, creating a smooth and visually appealing transition.

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

To implement a Fade in tooltip in CSS, you can use a combination of CSS transitions and opacity properties.

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

The following example demonstrates a fade-in tooltip. When you hover, a tooltip will appear. The tooltip will fade in smoothly with a transition effect.

<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

Tooltips give extra info without making the webpage messy. They help users understand different parts of the webpage better.
CSS tooltips can be customized and put in different positions for different screens and devices. This makes them useful for all types of websites, even those that change sizes on different screens.
CSS tooltips are highly customizable, it allows developers to style them to match the website’s design theme, including colors, fonts, and animations.
Implementing CSS tooltips is relatively simple and doesn’t require complex JavaScript or additional libraries.

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