寻求可实现图片特定区域hover弹出提示的JS/JQuery库

当然有合适的解决方案啦！针对你这种给地图图片特定区域加悬停提示的需求，我整理了几个实用的JS/jQuery方案，还附带了可直接运行的示例代码，帮你快速搞定~

我给你列几个最常用且易上手的选项：

• jQuery Maphilight：专门针对图片热点的jQuery插件，自带区域高亮效果，配合提示框实现起来非常省心。
• ImageMapster：功能更强大，支持自定义高亮样式、动态修改热点区域，适合有进阶需求的场景。
• 原生JS + HTML Image Map：完全不需要依赖第三方库，轻量灵活，适合追求极简的项目。

这个方案不需要引入任何外部库，直接用原生HTML和JS就能实现。核心是用<map>和<area>标签定义地图上的热点区域，再通过JS监听鼠标事件来控制提示框的显示。

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 自定义提示框样式 */
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            display: none;
            z-index: 1000;
            pointer-events: none; /* 避免提示框干扰鼠标事件 */
        }
        #map-container {
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="map-container">
        <!-- 替换成你的地图图片路径 -->
        <img id="world-map-img" src="你的地图图片地址" usemap="#world-map" alt="世界地图">
        <!-- 定义热点区域，coords需要根据你的图片实际坐标调整 -->
        <map name="world-map">
            <area shape="poly" coords="100,200,150,220,180,180,..." 
                  data-tooltip="美国：北美洲核心国家，全球第一大经济体" 
                  href="#">
            <area shape="poly" coords="200,300,250,320,230,350,..." 
                  data-tooltip="墨西哥：美国南部邻邦，以独特美食与玛雅文明著称" 
                  href="#">
        </map>
        <div class="tooltip" id="tooltip-box"></div>
    </div>

    <script>
        const tooltip = document.getElementById('tooltip-box');
        const areas = document.querySelectorAll('area');

        areas.forEach(area => {
            // 鼠标悬停时显示提示框
            area.addEventListener('mouseover', (e) => {
                const tooltipContent = area.getAttribute('data-tooltip');
                tooltip.textContent = tooltipContent;
                tooltip.style.display = 'block';
                // 让提示框跟随鼠标位置
                updateTooltipPosition(e);
            });

            // 鼠标移动时更新提示框位置
            area.addEventListener('mousemove', updateTooltipPosition);

            // 鼠标离开时隐藏提示框
            area.addEventListener('mouseout', () => {
                tooltip.style.display = 'none';
            });
        });

        // 统一更新提示框位置的函数
        function updateTooltipPosition(e) {
            tooltip.style.left = `${e.pageX + 15}px`;
            tooltip.style.top = `${e.pageY + 15}px`;
        }
    </script>
</body>
</html>

小提示：coords属性的坐标需要精准匹配地图上的区域，你可以用在线的Image Map Generator工具生成——上传你的地图图片，点击绘制区域就能自动生成对应的coords值，非常方便。

如果你想要自带区域高亮效果的方案，jQuery Maphilight绝对是首选，它能让热点区域在鼠标悬停时自动高亮，搭配提示框体验更好。

首先需要引入jQuery和Maphilight的脚本：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="jquery.maphilight.min.js"></script>

然后是完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .map-tooltip {
            position: absolute;
            background: #2c3e50;
            color: #ecf0f1;
            padding: 6px 10px;
            border-radius: 3px;
            font-size: 14px;
            display: none;
            z-index: 1000;
        }
        #map-wrapper {
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="map-wrapper">
        <img src="你的地图图片地址" usemap="#world-map" alt="世界地图">
        <map name="world-map">
            <area shape="poly" coords="100,200,150,220,180,180,..." 
                  title="美国：北美洲核心国家，全球第一大经济体" 
                  href="#">
            <area shape="poly" coords="200,300,250,320,230,350,..." 
                  title="墨西哥：美国南部邻邦，以独特美食与玛雅文明著称" 
                  href="#">
        </map>
        <div class="map-tooltip" id="map-tooltip"></div>
    </div>

    <script>
        $(function() {
            // 初始化Maphilight，自定义高亮样式
            $('img[usemap]').maphilight({
                fillColor: '#ff6b6b',
                fillOpacity: 0.3,
                strokeColor: '#e74c3c',
                strokeOpacity: 0.8,
                strokeWidth: 2
            });

            // 监听热点区域的鼠标事件
            $('area')
                .mouseover(function(e) {
                    const tooltipText = $(this).attr('title');
                    $('#map-tooltip').text(tooltipText).show();
                    updateTooltipPos(e);
                })
                .mousemove(updateTooltipPos)
                .mouseout(function() {
                    $('#map-tooltip').hide();
                });

            // 更新提示框位置
            function updateTooltipPos(e) {
                $('#map-tooltip').css({
                    left: e.pageX + 15,
                    top: e.pageY + 15
                });
            }
        });
    </script>
</body>
</html>

如果你的需求更复杂（比如动态修改热点区域、多区域联动），可以试试ImageMapster，它的API更丰富，能满足更多定制化需求，用法和Maphilight类似，你可以参考它的官方文档来扩展功能。

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