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

【问题标题】：How to put several Tooltipster tooltips on a picture?如何在一张图片上放置几个 Tooltipster 工具提示？
【发布时间】：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>

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

【问题讨论】：

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

标签： tooltip tooltipster

【解决方案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。

【讨论】：