CSS 如何为元素添加工具提示

CSS代表层叠样式表。它是由Hakon Wium、Bert Bos、World Wide Web于1996年12月17日开发的。

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

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

创建工具提示

在HTML中，工具提示可以用于指定用户悬停在元素上时有关该元素的其他信息。

以下是创建工具提示的步骤：

创建两个元素，一个带有”class”为”tooltip”，另一个带有”class”为”tooltiptext”
使用.tooltip类对”tooltip”容器进行样式设置。
使用.tooltiptext类对工具提示文本进行样式设置。
初始时，设置工具提示文本的可见性为hidden。
使用top、left和transform调整位置。
初始时，设置工具提示文本的不透明度为0。
为工具提示文本的不透明度添加过渡效果。
使用.tooltip:hover .tooltiptext来在悬停在.tooltip容器上时选择工具提示文本。
悬停时，将工具提示文本的可见性设置为visible，不透明度设置为1。

示例

在以下示例中，我们使用上述方法为HTML的一个元素添加了一个工具提示。

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