基础 CSS 工具提示显式定位

在 Web 开发中，工具提示（Tooltip）是一种常见的用户界面元素，用于在用户鼠标悬停在某个区域时显示相关的信息。可以通过 CSS 来为工具提示添加显式定位，以更好地控制工具提示的位置和样式。

实现方式

要实现基础 CSS 工具提示显式定位，需要使用 ::before 或 ::after 伪元素来创建工具提示的内容，并使用 position、top、bottom、left、right 等属性来定位工具提示的位置。

下面是一个实现基础 CSS 工具提示显式定位的示例代码：

/* 工具提示的样式 */
.tooltip {
  position: relative; /* 为::before伪元素提供定位上下文 */
}

.tooltip::before {
  content: "这是一个工具提示"; /* 工具提示的内容 */
  position: absolute; /* 使用绝对定位使其独立于其他元素 */
  top: 100%; /* 使工具提示出现在原始元素下面的位置 */
  left: 50%; /* 使工具提示水平居中 */
  transform: translateX(-50%); /* 修正水平居中的位置 */
  padding: 5px 10px; /* 工具提示的内边距 */
  border-radius: 3px; /* 工具提示的圆角 */
  background-color: #333; /* 工具提示的背景色 */
  color: #fff; /* 工具提示的前景色 */
  font-size: 14px; /* 工具提示的字体大小 */
  white-space: nowrap; /* 禁止工具提示换行 */
  opacity: 0; /* 初始状态下工具提示隐藏不可见 */
  transition: opacity 0.3s ease-in-out; /* 工具提示的过渡效果 */
}

/* 当鼠标悬停在原始元素上时显示工具提示 */
.tooltip:hover::before {
  opacity: 1; /* 显示工具提示 */
}

在这个示例中，我们创建了一个 .tooltip 的元素来容纳工具提示，并使用 ::before 伪元素来实际创建工具提示的内容。我们为 .tooltip 元素设置了相对定位，以便在 ::before 伪元素中使用绝对定位时，可以依据此来做定位。

在 ::before 伪元素中，我们设置了工具提示的内容、位置、样式等属性。注意，我们使用了 top: 100% 使工具提示出现在原始元素下面的位置，使用 left: 50% 使工具提示水平居中，使用 transform 修正水平居中的位置（因为 left: 50% 会造成工具提示左边缘超出容器元素的情况）。

另外，在 ::before 伪元素中，我们设置了 opacity: 0 来让工具提示一开始是隐藏的不可见的，之后在 .tooltip:hover::before 中设置 opacity: 1，来表明当鼠标悬停在原始元素上时显示工具提示。注意，我们为工具提示设置了 transition 属性来实现与之相关的过渡动画效果。

总结

基础 CSS 工具提示显式定位是一种常见的用户界面元素，可以用于在用户鼠标悬停在某个区域时显示相关的信息。要实现基础 CSS 工具提示显式定位，需要使用 ::before 或 ::after 伪元素来创建工具提示的内容，并使用 position、top、bottom、left、right 等属性来定位工具提示的位置。我们还可以使用 CSS 的其他属性来美化工具提示的样式，达到更好的用户体验。