CSS：提示工具(Tooltip)

最新推荐文章于 2025-05-17 11:42:05 发布

原创最新推荐文章于 2025-05-17 11:42:05 发布 · 513 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何使用CSS定位属性，如top、left、right和bottom，精确控制提示工具的位置。通过调整这些属性，可以轻松实现提示工具在元素上下左右的显示，并保持居中对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定位提示工具

以下实例中，提示工具显示在指定元素的右侧(left:105%) 。

注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

显示在左侧：

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

显示在头部：

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

显示在底部：

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

顶部提示框/底部箭头：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}