要将工具提示移动到鼠标指针上方,可以使用以下步骤:
data-tooltip
,并将其值设置为工具提示的内容。data-tooltip
属性值。然后根据鼠标位置调整工具提示元素的位置,使其始终位于鼠标指针上方。以下是一个示例代码:
HTML:
<div data-tooltip="这是工具提示">需要显示工具提示的元素</div>
CSS:
.tooltip {
position: absolute;
background-color: #000;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
}
JavaScript:
document.addEventListener('mousemove', function(event) {
const tooltip = document.createElement('div');
tooltip.classList.add('tooltip');
tooltip.textContent = event.target.getAttribute('data-tooltip');
document.body.appendChild(tooltip);
const x = event.clientX;
const y = event.clientY;
tooltip.style.left = x + 'px';
tooltip.style.top = (y - tooltip.offsetHeight) + 'px';
setTimeout(function() {
tooltip.remove();
}, 2000);
});
在上述示例中,当鼠标移动到带有data-tooltip
属性的元素上时,会在鼠标指针位置创建一个工具提示元素,并显示对应元素的data-tooltip
属性值。工具提示会在鼠标移出元素后自动消失。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云