如何调整鼠标悬停显示的卡片位置避免被浏览器右边缘截断

问题现象 #

• 地图热点悬停触发的信息卡片默认固定显示在热点右侧，当热点靠近浏览器右边缘时，卡片内容会被截断
• 仅调整CSS position属性无法解决该问题，需要修改定位逻辑
• 复现路径：鼠标悬停在编号为35、36的热点上即可触发截断现象

原有代码 #

原有CSS #

#card {
    position: relative;
    left: 30px;
    width: 300px;
    height: 150px;
    display: none;
    border: none;
    background: #ffd;
    pointer-events: none;
}

原有JavaScript #

let paths = document.querySelectorAll("path");
paths.forEach((p) => {
    p.addEventListener("mouseleave", (evt) => {
        card.style.display = "none";  
    });
    p.addEventListener("mousemove", (evt) => {
    let pos = oMousePos(svg, evt);
    let text = p.dataset.text;

    card.style.display = "block";
    card.style.top = pos.y + "px";
    card.style.left = pos.x + "px";
    card.innerHTML = text;
    });

});

function oMousePos(element, evt) {
    let ClientRect = element.getBoundingClientRect();
    return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
    };
}

问题根因 #

1. CSS定位方式错误：#card使用position: relative是相对元素自身原始位置偏移，无法实现跟随鼠标的悬浮定位效果，固定写死的left: 30px会导致所有位置计算偏差
2. JS逻辑缺失边界判断：代码固定将卡片放在鼠标位置右侧，完全没有计算当前位置剩余可视空间是否能容纳300px宽的卡片，靠近边缘时自然会溢出视口被截断

修复步骤 #

1. 调整CSS代码 #

将卡片定位改为fixed（相对浏览器视口定位，边界计算更简单），移除固定偏移，增加层级避免被其他元素遮挡：

#card {
    position: fixed;
    width: 300px;
    height: 150px;
    display: none;
    border: none;
    background: #ffd;
    pointer-events: none;
    z-index: 999;
}

2. 替换JavaScript定位逻辑 #

新增边界判断：卡片显示前先计算当前鼠标位置四周的剩余空间，右侧空间不足则显示在鼠标左侧，下侧空间不足则显示在鼠标上方，彻底解决边缘截断问题，原有oMousePos函数因为改用fixed定位不再需要，可以直接删除：

let paths = document.querySelectorAll("path");
// 统一配置卡片尺寸、偏移量，后续调整直接改这里即可
const CARD_WIDTH = 300;
const CARD_HEIGHT = 150;
const OFFSET = 15;

paths.forEach((p) => {
    p.addEventListener("mouseleave", () => {
        card.style.display = "none";  
    });
    p.addEventListener("mousemove", (evt) => {
        card.innerHTML = p.dataset.text;
        card.style.display = "block";

        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        
        // 计算水平位置
        let left = evt.clientX + OFFSET;
        if (left + CARD_WIDTH > viewportWidth) {
            left = evt.clientX - OFFSET - CARD_WIDTH;
        }

        // 计算垂直位置
        let top = evt.clientY + OFFSET;
        if (top + CARD_HEIGHT > viewportHeight) {
            top = evt.clientY - OFFSET - CARD_HEIGHT;
        }

        card.style.left = `${left}px`;
        card.style.top = `${top}px`;
    });
});

如果你的地图容器存在滚动、不是和视口对齐的布局，只需要把视口宽高替换为地图容器的边界值即可，判断逻辑完全一致。

内容的提问来源于stack exchange，提问作者camster