如何在一张图片上放置几个 Tooltipster 工具提示？

Posted 2023-05-07

【中文标题】如何在一张图片上放置几个 Tooltipster 工具提示？

【英文标题】：How to put several Tooltipster tooltips on a picture?

【发布时间】：2017-08-14 18:31:55

【问题描述】：

我使用 JQuery 插件 Tooltipster 制作工具提示，但遇到了一个问题。当用户将光标放在图片上的一个特定位置时，我如何显示工具提示，比如图片中人的头部。图片为JPG格式。

        <script>
        $(document).ready(function() 
            $('.Tooltip').tooltipster(
                animation: 'grow',
                delay: 100,
                interactive: true,
                zIndex: 1,
                maxWidth: 300,
                repositionOnScroll: true,
                trigger: 'custom',
                triggerOpen: 
                    mouseenter: true,
                    tap: true
                ,
                triggerClose: 
                    mouseleave: true,
                    tap: true
                ,
                coord: 
                    left: 100,
                    top: 100
                
            );
        );
    </script>

我尝试使用坐标，但它不起作用。我做错了什么或错过了什么？谢谢。

【问题讨论】：

我不确定您的问题标题与问题本身有何关系。使用区域标签指定图像的一部分并在其上应用工具提示。

【参考方案1】：

您可以通过将 <svg> 元素嵌入到您的 html 中来实现此目的 并将您的 .jpg 文件放入 <svg> 中。然后您可以定义形状 像这样在图像的顶部：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/
    <g>
        <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="yourImage.jpg"></image>
        <circle class="Tooltip" cx="263" cy="72" r="4" style="fill: rgb(206, 206, 206);" fill-opacity="0.4">
            <title>Your Tooltip</title>
        </circle>
    </g>
</svg>

确保将fill-opacity 设置为0 以使形状透明。

注意： Tooltipster 可以很好地与 SVG 配合使用，您只需包含一些其他脚本即可使其正常工作。见here。