【乔二参】CSS 提示工具(Tooltip)示例
warning:
这篇文章距离上次修改已过441天，其中的内容可能已经有所变动。
以下是实现一个简单的CSS提示工具（Tooltip）的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 可视边界 */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* 位置 */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用负外边距居中 */
/* 动画 */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1; /* 鼠标悬停时显示提示 */
}
</style>
</head>
<body>
<p>悬停鼠标查看工具提示：
<span class="tooltip">悬停我
<span class="tooltiptext">这是一个提示文本</span>
</span>
</p>
</body>
</html>这段代码定义了一个简单的工具提示，当用户将鼠标悬停在“悬停我”文本上时，会显示一个黑色的提示框，里面包含文本“这是一个提示文本”。通过CSS中的:hover伪类和透明度过渡效果，实现了平滑的用户体验。
评论已关闭