如何为 span 元素添加工具提示？

CSS 代表层叠样式表 (Cascading Style Sheets)。它由 Hakon Wium、Bert Bos 和万维网联盟于 1996 年 12 月 17 日开发。

CSS 是一种样式表，用于指定网页中 HTML 元素的样式。它允许 Web 开发人员控制布局、颜色、字体、边距、填充、高度、宽度、背景图片等。最新版本的 CSS 是 CSS3。

在本文中，我们将学习如何使用 HTML 和 CSS 为 span 元素添加工具提示。

创建工具提示

在 HTML 中，工具提示可用于在用户将鼠标悬停在元素上时指定有关该元素的附加信息。

以下是创建鼠标悬停时显示的工具提示的方法：

  • 创建两个 <span> 元素；一个带有类名 "tooltip"，另一个带有类名 "tooltiptext"

  • 使用 .tooltip 类样式化 "tooltip" 容器。

  • 使用 .tooltiptext 类样式化工具提示文本。

  • 最初，将工具提示文本的 visibility 设置为 - hidden。

  • 使用 top、left 和 transform 属性调整定位。

  • 最初，将工具提示文本的 opacity 设置为 0。

  • 为工具提示文本的 opacity 添加过渡效果。

  • 使用 .tooltip:hover .tooltiptext 在将鼠标悬停在 .tooltip 容器上时定位工具提示文本。

  • 悬停时，将工具提示文本的 visibility 设置为 visible，opacity 设置为 1。

示例

在下面的示例中，我们使用上述方法将工具提示添加到 HTML span 元素：

<!DOCTYPE html>
<html>
<head>
   <style>
      /* Style the tooltip */
      .tooltip {
         position: relative;
         display: inline-block;
         cursor: pointer;
         background-color: aquamarine;
      }

      /* Style the tooltip text */
      .tooltip .tooltiptext {
         visibility: hidden;
         background-color: seagreen;
         color: #fff;
         text-align: center;
         padding: 5px;
         margin-top: 10px;
         border-radius: 10px;
         position: absolute;
         z-index: 1;
         top: 50%;
         left: 125%;
         transform: translateY(-50%);
         opacity: 0;
         transition: opacity 0.3s;
      }

      /* Show the tooltip text when hovering on the span element */
      .tooltip:hover .tooltiptext {
         visibility: visible;
         opacity: 1;
      }
   </style>
</head>
<body>
   <span class="tooltip">Hover this text.
      <span class="tooltiptext">Welcome to Tutorialspoint</span>
   </span>
</body>
</html>


更新于：2023年8月4日

2K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告