Question

我正在使用jquery tooltipster插件（https://iamceege.github.io/tooltipster/），我遇到了定位问题。我将图像放在地图上并绝对定位。我希望工具提示出现在底部，但我无法使其工作：它们一直出现在图像的顶部，工具提示的高位偏离屏幕（请参阅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

它是因为你的元素位置而产生的。您的工具提示不适合在底部，因为它比顶部空间小。你可以在这个小提琴中查看它：

http://jsfiddle.net/dj2tvjjs/

在顶部图片中，您必须查看底部位置的工具提示，但在底部图片中，您必须使用相同的代码查看工具提示的顶部位置

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

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

1 个答案: