基础 CSS 工具提示顶部

工具提示（Tooltip）是一种用于提供简短消息提示的 UI 组件，常常在鼠标悬停或点击某个目标元素时触发。CSS 提供了基础的支持，可以轻松地创建简单的工具提示样式。

实现方法

工具提示可以使用伪元素 ::after 或 ::before 来创建，同时使用 CSS 属性 content 来插入文本内容。这里以 ::after 为例：

.tooltip {
  position: relative;
}

.tooltip::after {
  content: "Tooltip text";
  position: absolute;
  top: -25px;
  left: 0;
  display: none;
  padding: 5px;
  background-color: #333;
  color: #fff;
}

.tooltip:hover::after {
  display: block;
}

这段 CSS 代码会在 .tooltip 元素的上方显示一个工具提示，当鼠标悬停在 .tooltip 上方时，工具提示会显示出来。具体实现方法包括：

• 让 .tooltip 的 position 属性设为 relative，以作为 ::after 的参照物。
• 为 .tooltip::after 添加 content 属性，这里设置为 "Tooltip text"。
• 将 position 属性设为 absolute，让工具提示脱离文档流并以 .tooltip 为父元素作绝对定位。
• 通过 top 和 left 属性设置工具提示的位置。
• 将 display 属性设为 none，让工具提示默认不可见。
• 添加一个伪类 .tooltip:hover::after，让工具提示在鼠标悬停时显示出来。

定制样式

上面的代码片段只是最基本的工具提示样式，你可以根据需要进行样式上的调整。比如，你可以通过 border-radius 属性来定制工具提示的圆角，或者使用 box-shadow 属性添加阴影效果。

.tooltip::after {
  content: "Tooltip text";
  position: absolute;
  top: -20px;
  left: 0;
  display: none;
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
}

总结

以上就是基础的 CSS 工具提示顶部的介绍。我们可以使用伪元素和 CSS 属性来创建简单而有效的工具提示。同时，我们也可以根据需要对工具提示的样式进行定制，让它能够更好地满足实际需求。