📌  相关文章
📜  如何使用 CSS3 和 jQuery 创建链接工具提示？(1)

📅  最后修改于: 2023-12-03 15:08:18.293000             🧑  作者: Mango

使用 CSS3 和 jQuery 创建链接工具提示

链接工具提示是一个非常常见的 UI 功能，当用户把鼠标悬停在链接上时，弹出一个提示框，显示该链接的相关信息。在这篇文章中，我们将使用 CSS3 和 jQuery 实现这个功能。

基本思路

我们的链接工具提示将由两部分组成：一个链接和一个浮动的提示框。我们将使用 CSS3 来实现提示框的样式，使用 jQuery 来控制提示框的显示和隐藏。

具体来说，我们需要做以下几个步骤：

  1. 创建链接，并为其添加一个标识符（例如 data-tooltip）。
  2. 基于标识符，在鼠标悬停时显示提示框。
  3. 在鼠标移出链接或提示框时隐藏提示框。
HTML

首先，我们需要创建一个链接，并添加一个 data-tooltip 属性，用于标识该链接需要显示工具提示。例如：

<a href="#" data-tooltip="This is a tooltip">Link</a>
CSS

接下来，我们需要定义提示框的样式。我们将使用伪类 :before 和 :after 来创建一个三角形，使提示框看起来更加漂亮。以下是我们的 CSS：

.tooltip {
  position: absolute;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip:after, .tooltip:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
}

.tooltip:after {
  border-width: 10px;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
}

.tooltip:before {
  border-width: 11px;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
  bottom: -22px;
  left: 50%;
  margin-left: -11px;
}

这段代码定义了一个名为 .tooltip 的类，用于表示提示框的样式。.tooltip 的 position 属性被设置为 absolute，以便让提示框能够根据链接所在的位置进行定位。z-index 属性设置为 999，以使提示框永远在其他元素的顶部。

我们还使用 border-radius 属性来创建圆角，然后定义了一个渐变的 background-color，以使提示框看起来更加漂亮。

三角形是通过伪类 :before 和 :after 创建的。这些伪类用于生成提示框底部的三角形，以及在三角形下面的尖角。我们还使用 border-color 属性来使三角形的颜色与提示框的颜色一致。

最后，我们使用 opacity 属性来定义提示框的不透明度，以便在鼠标悬停时淡入淡出提示框。

jQuery

最后，我们需要使用 jQuery 控制提示框的显示和隐藏。以下是我们的代码：

$(document).ready(function() {
  $('[data-tooltip]').mouseover(function() {
    var tooltip = $('<div class="tooltip"></div>').text($(this).attr('data-tooltip'));
    $(this).append(tooltip);
    var tooltipWidth = tooltip.outerWidth();
    var tooltipHeight = tooltip.outerHeight();
    tooltip.css({
      top: $(this).offset().top - tooltipHeight - 10,
      left: $(this).offset().left + ($(this).outerWidth() / 2) - (tooltipWidth / 2),
      opacity: 1
    });
  }).mouseout(function() {
    $(this).find('.tooltip').remove();
  });
});

这段代码做了以下几件事情：

  1. 当用户将鼠标悬停在一个带有 data-tooltip 属性的链接上时，它会创建一个提示框，然后将其附加到链接上面。
  2. 然后它计算提示框的位置，以使其位于链接的正上方，并让它居中对齐。
  3. 最后，当鼠标移出链接或提示框时，它会将提示框删除。
完整代码

下面是完整的 HTML、CSS 和 jQuery 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Link Tooltip</title>
  <style>
    .tooltip {
      position: absolute;
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      padding: 10px;
      border-radius: 4px;
      font-size: 14px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .tooltip:after, .tooltip:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
    }

    .tooltip:after {
      border-width: 10px;
      border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
      bottom: -20px;
      left: 50%;
      margin-left: -10px;
    }

    .tooltip:before {
      border-width: 11px;
      border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
      bottom: -22px;
      left: 50%;
      margin-left: -11px;
    }
  </style>
</head>
<body>
  <a href="#" data-tooltip="This is a tooltip">Link</a>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('[data-tooltip]').mouseover(function() {
        var tooltip = $('<div class="tooltip"></div>').text($(this).attr('data-tooltip'));
        $(this).append(tooltip);
        var tooltipWidth = tooltip.outerWidth();
        var tooltipHeight = tooltip.outerHeight();
        tooltip.css({
          top: $(this).offset().top - tooltipHeight - 10,
          left: $(this).offset().left + ($(this).outerWidth() / 2) - (tooltipWidth / 2),
          opacity: 1
        });
      }).mouseout(function() {
        $(this).find('.tooltip').remove();
      });
    });
  </script>
</body>
</html>
总结

在这篇文章中，我们学习了如何使用 CSS3 和 jQuery 创建链接工具提示。我们首先创建了一个链接，并添加一个 data-tooltip 属性，用于标识该链接需要显示工具提示。然后，我们使用 CSS3 定义了提示框的样式，包括一个漂亮的三角形。最后，我们使用 jQuery 控制了提示框的显示和隐藏。

希望这篇文章对你有所帮助！