下面是“原生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事件,并通过获取鼠标位置,改变提示框的位置。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JavaScript实现Tooltip浮动提示框特效 - Python技术站