【乔二参】CSS 提示工具(Tooltip)示例

作者：System 时间：2024年08月20日分类：所有,css 字数：1068

以下是实现一个简单的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伪类和透明度过渡效果，实现了平滑的用户体验。

【乔二参】CSS 提示工具(Tooltip)示例

评论已关闭

推荐阅读