CSS 工具提示

CSS工具提示

当用户将鼠标指针移动到元素上时，工具提示通常用于指定有关某些内容的额外信息：

基本工具提示

创建用户将鼠标移到元素上时显示的工具提示：

<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;
                  padding: 5px 0;
                  border-radius: 6px;

                  /* 定位工具提示文本-参见下面的示例! */
                  position: absolute;
                  z-index: 1;
                }

                /* 当鼠标滑过工具提示容器时，显示工具提示文本 */
                .tooltip:hover .tooltiptext {
                  visibility: visible;
                }
                </style>

                <div class="tooltip">鼠标悬停在我这里
                  <span class="tooltiptext">工具提示文本</span>
                </div>

尝试一下

示例说明

HTML：使用容器元素（如<div>）并将"tooltip"类添加到其中。当用户将鼠标悬停在此<div>上时，它将显示工具提示文本。工具提示文本放在内联元素（如<span>）中class="tooltiptext"。

CSS：用于定位工具提示文本所需的tooltip类使用。

注意：请参阅下面有关如何定位工具提示的示例。position:relative position:absolute

tooltiptext类保存实际提示文本。它默认是隐藏的，并且在悬停时可见（见下文）。我们还添加了一些基本样式：120px宽度，黑色背景颜色，白色文本颜色，居中文本和5px顶部和底部填充。CSS border-radius属性用于向工具提示文本添加圆角。:hover选择器被用来显示工具提示文本当用户移动鼠标经过<div>使用class="tooltip"。

定位工具提示

在本例中，工具提示位于“可悬浮”文本的右边(left:105%)。还要注意top:-5px用于将其放置在容器元素的中间。我们使用数字5是因为工具提示文本的上下填充为5px。如果您增加了它的填充，也要增加top属性的值，以确保它保持在中间(如果这是您想要的)。如果您想将工具提示放在左边，也可以使用相同的方法。

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

尝试一下

左侧工具提示

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

尝试一下

如果您希望工具提示显示在顶部或底部，请参阅下面的示例。请注意，我们使用margin-left值为-60像素的属性。这是将工具提示居中于可暂停文本的上方/下方。它设置为工具提示宽度的一半（120/2 = 60）。

顶部工具提示

.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)来居中放置工具提示 */
                }

尝试一下

工具提示箭头

要创建应从工具提示的特定一侧显示的箭头，请在工具提示后添加“空”内容，并将伪元素类::after与content属性一起添加。箭头本身是使用边框创建的。这将使工具提示看起来像一个讲话泡泡。此示例演示如何将箭头添加到工具提示的底部：

.tooltip .tooltiptext::after {
                  content: " ";
                  position: absolute;
                  top: 100%; /* At the bottom of the tooltip */
                  left: 50%;
                  margin-left: -5px;
                  border-width: 5px;
                  border-style: solid;
                  border-color: black transparent transparent transparent;
                }

尝试一下

将箭头放在工具提示内：top: 100%将箭头放在工具提示的底部。left: 50%将箭头居中。
注意：border-width属性指定箭头的大小。如果更改margin-left值，也请将值更改为相同值。这将使箭头保持居中。border-color用于将内容转换成一个箭头。我们将顶部边框设置为黑色，其余部分设置为透明。如果所有的边都是黑色的，你最终会得到一个黑色方框。此示例演示如何将箭头添加到工具提示的顶部。请注意，我们这次设置了底部边框颜色：

.tooltip .tooltiptext::after {
                  content: " ";
                  position: absolute;
                  bottom: 100%;  /* At the top of the tooltip */
                  left: 50%;
                  margin-left: -5px;
                  border-width: 5px;
                  border-style: solid;
                  border-color: transparent transparent black transparent;
                }

尝试一下

此示例演示如何在工具提示的左侧添加箭头：

.tooltip .tooltiptext::after {
                  content: " ";
                  position: absolute;
                  top: 50%;
                  right: 100%; /* To the left of the tooltip */
                  margin-top: -5px;
                  border-width: 5px;
                  border-style: solid;
                  border-color: transparent black transparent transparent;
                }

尝试一下

此示例演示如何在工具提示的右侧添加箭头：

.tooltip .tooltiptext::after {
                  content: " ";
                  position: absolute;
                  top: 50%;
                  left: 100%; /* To the right of the tooltip */
                  margin-top: -5px;
                  border-width: 5px;
                  border-style: solid;
                  border-color: transparent transparent transparent black;
                }

尝试一下

淡入工具提示（动画）

如果要在工具提示文本即将可见时淡入其中，可以将CSS transition属性与属性一起使用opacity ，并在指定的秒数（1秒内）从完全不可见变为100％可见例）：

.tooltip .tooltiptext {
                  opacity: 0;
                  transition: opacity 1s;
                }

                .tooltip:hover .tooltiptext {
                  opacity: 1;
                }

尝试一下