Tooltipster可防止重叠工具提示

Question

我有一张满是图片的桌子。 我正在使用Tooltipster插件在悬停时在图片的所有四个网站上显示多个tooltips。

在表格的中间，它按预期工作：

但是，在表格的左侧和右侧，四个tooltips中的两个重叠。

左侧：

右侧：

我如何防止这种情况发生？

就像迫使它显示在左/右侧，即使它是表的结尾或 在一侧显示tooltips但一个接一个地显示，而不重叠或其他。

使用Tooltipster甚至可以实现这样的事情吗？

更新

HTML：

<div class="Tooltip">
  <img  src="./media/images/test.png" />
</div>

<div class="tooltip_templates" >
    <div  id="tooltip_content_top" >
        text <br>
        text <br>
    </div>
</div>
<div class="tooltip_templates" >
    <div  id="tooltip_content_bottom">
        text <br>
        text <br>
    </div>
</div>
<div class="tooltip_templates" >
    <div  id="tooltip_content_left">
        text <br>
        text <br>
    </div>
</div>
<div class="tooltip_templates" >
    <div  id="tooltip_content_right">
        text <br>
        text <br>
    </div>
</div>

JS：

    <script>
        let tooltip= $(".Tooltip");

        tooltip.tooltipster({
            content: $("#tooltip_content_top"),
            contentCloning: true,
            multiple: true,
            side: "top",
        });

        tooltip.tooltipster({
            content: $("#tooltip_content_bottom"),
            contentCloning: true,
            multiple: true,
            side: "bottom",
        });

        tooltip.tooltipster({
            content: $("#tooltip_content_left"),
            contentCloning: true,
            multiple: true,
            side: "left",
        });

        tooltip.tooltipster({
            content: $("#tooltip_content_right"),
            contentCloning: true,
            multiple: true,
            side: "right",
        });
    </script>