在网站或应用程序中，Tooltip 提示框是非常常用的交互元素之一。它可以告诉用户更多有用的信息，例如鼠标悬浮在链接或按钮上时，提醒用户该项操作的功能或含义。在 SASS 中，我们可以很容易地实现 Tooltip 提示框，让网站或应用程序更加美观和易用。
HTML 结构
首先，我们需要在 HTML 中添加 Tooltip 提示框的基本结构，通常是一个包裹在 <span> 标签中的 Tooltip 提示框容器。我们可以将 Tooltip 提示框的内容作为 <span> 标签的文本内容，如下所示：
<button class="btn" data-tooltip="这是一个按钮">按钮</button> <a href="#" class="link" data-tooltip="这是一个链接">链接</a>
在这个例子中，我们使用 data-tooltip 属性来指定 Tooltip 提示框的内容。这是一种比较常见的方式，我们可以使用 JavaScript 或 jQuery 来动态生成该属性的值。
CSS 样式
接下来，我们需要编写 SASS 样式来实现 Tooltip 提示框。首先，我们定义一些基本的变量：
$tooltip-bg-color: #333; $tooltip-text-color: #fff; $tooltip-arrow-width: 5px; $tooltip-arrow-height: 10px;
这些变量定义了 Tooltip 提示框的背景颜色、文字颜色、箭头的宽度和高度。
然后，我们定义 Tooltip 提示框的样式：
// www.javascriptcn.com code example
.tooltip {
position: relative;
&::before {
content: "";
position: absolute;
z-index: 1;
border-left: $tooltip-arrow-width solid transparent;
border-right: $tooltip-arrow-width solid transparent;
border-top: $tooltip-arrow-height solid $tooltip-bg-color;
top: -($tooltip-arrow-height + 2px);
left: 50%;
transform: translateX(-50%);
}
&::after {
content: attr(data-tooltip);
position: absolute;
z-index: 1;
background-color: $tooltip-bg-color;
color: $tooltip-text-color;
font-size: 14px;
padding: 8px;
border-radius: 4px;
white-space: nowrap;
top: -($tooltip-arrow-height + 10px);
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
}
&:hover::after {
opacity: 1;
visibility: visible;
top: -($tooltip-arrow-height + 20px);
}
}在这里，我们定义了 .tooltip 类，它包含了一个箭头和一个 Tooltip 提示框，当鼠标悬停在元素上时，显示 Tooltip 提示框。箭头和 Tooltip 提示框通过伪元素 ::before 和 ::after 实现，并使用 content 属性插入元素和其中的文本。
其中，::before 对应箭头，使用了 border 属性绘制出一个实心三角形，位于 Tooltip 提示框的上方。::after 对应 Tooltip 提示框本身，设置了背景色、文字颜色、字体大小、圆角、位置和过渡效果。
最后，我们定义了当鼠标悬停在元素上时，Tooltip 提示框的一些样式变化，例如改变透明度、可见性和位置。
示例代码
最后，我们来看一下完整的示例代码。你可以将代码复制到你的 SASS 文件中，直接使用。该示例代码代码默认使用了 jQuery 来动态生成 Tooltip 提示框的内容。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SASS 中 Tooltip 提示框的实现</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-tooltip]').each(function() {
var content = $(this).data('tooltip');
$(this).append('<span class="tooltip" data-tooltip="' + content + '"></span>');
});
});
</script>
</head>
<body>
<button class="btn" data-tooltip="这是一个按钮">按钮</button>
<a href="#" class="link" data-tooltip="这是一个链接">链接</a>
</body>
</html>// www.javascriptcn.com code example
$tooltip-bg-color: #333;
$tooltip-text-color: #fff;
$tooltip-arrow-width: 5px;
$tooltip-arrow-height: 10px;
.tooltip {
position: relative;
&::before {
content: "";
position: absolute;
z-index: 1;
border-left: $tooltip-arrow-width solid transparent;
border-right: $tooltip-arrow-width solid transparent;
border-top: $tooltip-arrow-height solid $tooltip-bg-color;
top: -($tooltip-arrow-height + 2px);
left: 50%;
transform: translateX(-50%);
}
&::after {
content: attr(data-tooltip);
position: absolute;
z-index: 1;
background-color: $tooltip-bg-color;
color: $tooltip-text-color;
font-size: 14px;
padding: 8px;
border-radius: 4px;
white-space: nowrap;
top: -($tooltip-arrow-height + 10px);
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
}
&:hover::after {
opacity: 1;
visibility: visible;
top: -($tooltip-arrow-height + 20px);
}
}总结
在本文中，我们介绍了如何使用 SASS 实现 Tooltip 提示框，包括 HTML 结构、CSS 样式和示例代码。这种方式可以使我们更加灵活地改变 Tooltip 提示框的样式和行为，让网站或应用程序更加美观和易用。如果你有更好的方法或意见，请在评论区中留言。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64c8cc9e5ad90b6d0414b8e3