Tooltipster jquery 插件：工具提示在绝对定位图像上的位置

Question

我正在使用 jquery 工具提示插件（https://iamceege.github.io/tooltipster/) and I'm having a problem with the positioning. I place images on a map and position them absolutely. I want the tooltip to appear at the bottom, but I can't get it to work: they keep appearing at the top of the image and the upper bit of the tooltip goes offscreen (see here - 将鼠标悬停在树上时会出现工具提示）。

这是我的代码：任何人都可以告诉我我做错了什么吗？或者为什么工具提示没有出现在底部？

    <script>
        $(document).ready(function() {

            $('#tt1').tooltipster({
                minWidth: 400,
                maxWidth: 400,
                content: $('<span><p><strong>Duffel-West</strong><br>&nbsp;<br><img src="006.jpg"><br>&nbsp;<br>Kwb herorienteren in Duffel. Hoe kunnen we via het transitieverhaal nieuwe leden vinden? Op de infoavond rond de stroomafschakelingsprocedure zijn er mensen gevonden om een repair cafe te organiseren. Dit repair cafe was een succes met meer dan 100 bezoekers. Het is nu de bedoeling om dit twee maal per jaar te organiseren. Alsook dit te combineren met andere transitieactiviteiten.  <br>&nbsp;<br><strong>Status</strong><br>Kwb Duffel-West  slaagt in zijn herorienteringsproces. </span>'),
                position: 'bottom'
            });
        });
    </script>
</head>

<body>
    <img src="i1.png" width="30" height="41" id="tt1" style="position: relative; left:250px; top: 270px; cursor:crosshair" class="tooltip 1" title="Duffel West">
</body>

Answer 1

是因为你的元素位置而产生的。您的工具提示不适合底部，因为它比顶部少 space。您可以在 fiddle:

中查看它的工作情况

http://jsfiddle.net/dj2tvjjs/

在上图中，您必须查看工具提示的底部位置，但在底部图像中，您必须查看工具提示的顶部位置使用相同的代码来初始化

$('#tt1, #tt2').tooltipster({
    position: 'bottom'
});

Tooltipster jquery 插件：工具提示在绝对定位图像上的位置

Tooltipster jquery plugin: position of tooltip on absolute positioned image

jquery

tooltipster