请基于我这个代码修改让 tooltip 显示在鼠标位置的右上方而不是现在的鼠标位置的右侧10px下方10px。需要计算进 tooltip的高度因为会有带img的Tooltip和纯文字的 Tooltip的情况:let selectedLabel = null;let currentTooltip = null;let tooltipTimer = null;labelsforEachlabel =
请尝试替换以下代码:
let left = mouseX - wrapperRect.left + 10; let top = mouseY - wrapperRect.top + 10;
if (!imgSrc || !tooltip.querySelector("img")) { left = e.pageX + 10; top = e.pageY - tooltipHeight - 10; } else if (left + tooltipWidth > wrapperRect.left + wrapperRect.width) { // tooltip 超出右侧边界 left = wrapperRect.left + wrapperRect.width - tooltipWidth; }
if (top < wrapperRect.top) { // tooltip 超出上方边界 top = e.pageY + 10; }
tooltip.style.left = left + "px"; tooltip.style.top = top + "px";
解释一下,我们将 left 和 top 的计算方式做了调整,使得在没有图片或者文字高度小于 150px 的情况下,tooltip 会出现在鼠标位置的右上方,距离鼠标的上方和右方都为 10px。如果 tooltip 超出了右侧或上方边界,我们会将 left 和 top 进行调整,使得 tooltip 能够完整展示在可视区域内
原文地址: https://www.cveoy.top/t/topic/ftgi 著作权归作者所有。请勿转载和采集!