原生JavaScript实现Tooltip浮动提示框特效-前端开发

下面是“原生JavaScript实现Tooltip浮动提示框特效”的完整攻略。

下面是“原生JavaScript实现Tooltip浮动提示框特效”的完整攻略。

什么是Tooltip浮动提示框特效

Tooltip浮动提示框特效是一种鼠标移入到某个元素上时，显示一个类似于气泡的提示框，提示框中包含了与该元素有关的相关信息，一般应用于网页中。

实现步骤

HTML结构
首先，需要在HTML中编写一个触发提示框的元素，例如一个标签。

<span class="tooltip" data-content="这是一个Tooltip提示框">这里是要提示的内容</span>

其中，data-content属性是用来存储要显示的提示框内容的。

CSS样式
接下来，需要编写CSS样式，设置提示框的样式和位置。

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
    margin: 30px;
}
.tooltip::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #000 transparent transparent transparent;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
.tooltip::after {
    content: attr(data-content);
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.tooltip:hover::after {
    opacity: 1;
}

这里的CSS样式中，设置了position属性为relative，使得设置的绝对定位属性可以相对于该元素进行定位。同时，设置伪元素:before和:after，分别用来设置提示框的箭头和显示内容。通过:hover伪类，让提示框在鼠标悬浮时显示出来。

JavaScript交互
最后，需要编写JavaScript代码，实现交互效果，使得提示框可以随着鼠标移动而跟随。

const tooltipElements = document.querySelectorAll(".tooltip");

tooltipElements.forEach((tooltip) => {
  tooltip.addEventListener("mousemove", (e) => {
    const tooltipBox = tooltip.querySelector(".tooltip-box");
    tooltipBox.style.top = e.clientY + 20 + "px";
    tooltipBox.style.left = e.clientX + "px";
  });
});

这里使用querySelectorAll获取所有要进行提示框操作的元素，然后对每个元素添加mousemove事件，通过获取鼠标移动时的坐标，来改变提示框的位置。

示例如下

示例一

这是一个Tooltip浮动提示框效果的最基本实现，不带有任何交互效果。

<span class="tooltip" data-content="这是一个Tooltip提示框">这里是要提示的内容</span>

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
}
.tooltip::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #000 transparent transparent transparent;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
.tooltip::after {
    content: attr(data-content);
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.tooltip:hover::after {
    opacity: 1;
}

示例二

这是一个带有交互效果的Tooltip浮动提示框，提示框可以随着鼠标移动而跟随。

<span class="tooltip" data-content="这是一个带有交互效果的Tooltip提示框">这里是要提示的内容</span>

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: help;
    margin: 30px;
}
.tooltip::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #000 transparent transparent transparent;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
}
.tooltip-box {
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
}
.tooltip:hover .tooltip-box {
    opacity: 1;
}

const tooltipElements = document.querySelectorAll(".tooltip");

tooltipElements.forEach((tooltip) => {
  const tooltipBox = document.createElement("div");
  tooltipBox.classList.add("tooltip-box");
  tooltipBox.innerText = tooltip.getAttribute("data-content");
  tooltip.appendChild(tooltipBox);
  tooltip.addEventListener("mousemove", (e) => {
    tooltipBox.style.top = e.clientY + 20 + "px";
    tooltipBox.style.left = e.clientX + "px";
  });
});

这里在HTML中添加了一个子元素作为提示框的存放容器，然后在JavaScript中获取到该子元素，绑定mousemove事件，并通过获取鼠标位置，改变提示框的位置。