Question

我使用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>

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

Answer 1

您可以通过在html中嵌入<svg>元素来实现此目的并将你的.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。

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

1 个答案: