基础 CSS 工具提示点击

CSS 工具提示是一种用户界面组件，用于向用户提供有用的提示信息。通常情况下，当用户将鼠标悬停在页面上的某个元素上时，工具提示会显示一段文本或图标，以帮助用户理解元素的含义或使用方法。

在这篇文章中，我们将介绍如何使用 CSS 创建基础的工具提示，并将其与点击事件相结合，以使工具提示在用户点击元素时出现。

创建基础的 CSS 工具提示

要创建 CSS 工具提示，我们需要使用 CSS :hover 伪类选择器来检测鼠标是否悬停在元素上。在以下示例中，我们将使用 data-tooltip 属性来存储工具提示的文本内容，并使用 ::after 伪元素创建箭头图标。请注意，我们添加了一些基本的样式来使工具提示看起来更美观。

<span class="tooltip" data-tooltip="这是工具提示的文本">鼠标悬停在我上面</span>

<style>
.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid black;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tooltip:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px;
  background-color: black;
  color: white;
  font-size: 14px;
  border-radius: 5px;
}
</style>

运行以上代码，当用户将鼠标悬停在 鼠标悬停在我上面 文本上时，将会显示一个简单的工具提示。

结合点击事件

为了使工具提示在用户点击元素时出现，我们需要在 JavaScript 中添加一个事件监听器。在以下示例中，我们将使用 jQuery 库来为元素添加 click 事件监听器，并在单击事件中显示工具提示。

<span class="tooltip-click" data-tooltip="这是工具提示的文本">单击我</span>

<style>
.tooltip-click {
  position: relative;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip-click::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid black;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tooltip-click:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px;
  background-color: black;
  color: white;
  font-size: 14px;
  border-radius: 5px;
}
</style>

<script>
$(function() {
  $('.tooltip-click').click(function() {
    $(this).toggleClass('active');
  });
});
</script>

请注意，在以上示例中，我们使用了 .active 类来控制工具提示的显示和隐藏。我们还为 .tooltip-click 元素添加了 cursor 样式，以表示元素可单击。

运行以上代码，当用户单击 单击我 文本时，将会显示工具提示。再次单击元素时，将会隐藏工具提示。

以上就是如何创建基础的 CSS 工具提示，并将其与点击事件相结合的介绍。希望这篇文章能够帮助你了解如何实现这个用户界面组件。