如何向 span 元素添加工具提示?
htmlweb developmentfront end technology更新于 2024/11/16 9:16:17
CSS 代表层叠样式表。它由 Hakon Wium 和 Bert Bos 于 1996 年 12 月 17 日在 World Wide Web 上开发。
CSS 是一种样式表，用于指定网页中 HTML 元素的样式。它允许 Web 开发人员控制布局、颜色、字体、边距、填充、高度、宽度、背景图像等。CSS 的最新版本是 CSS3。
在本文中，我们将学习如何使用 HTML 和 CSS 向 span 元素添加工具提示。
创建工具提示
在 HTML 中，当用户将鼠标悬停在元素上时，可以使用工具提示来指定有关某些内容的附加信息。
以下是创建当用户将鼠标移到元素上时显示的工具提示的方法 -
创建两个 <span> 元素;一个带有类"tooltip"，另一个带有类"tooltiptext"。
使用 .tooltip 类设置"tooltip"容器的样式。
使用 .tooltiptext 类设置工具提示文本的样式。
首先，将工具提示文本的 visibility 设置为 hidden。
使用 top、left 和 transform 调整位置。
首先，将工具提示文本的 opacity: 0。
为工具提示文本的不透明度添加过渡效果。
使用 .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>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
