jquery - 将工具提示保留在父容器内

Question

我在 Web 应用程序中使用 jQuery UI 工具提示。默认情况下，工具提示的位置是“工具提示元素”的左下角。但是，当工具提示不适合浏览器窗口时，它会切换到右下角。

这种行为很好，但是我不想根据浏览器窗口的宽度来确定工具提示是右下角还是左下角，而是根据父容器的宽度来确定，这样工具提示就不会显示在我确定的区域之外。

请注意，我知道如何使用 API 手动控制位置，我正在寻找控制全局定位逻辑的方法。

$(function() {
    $( '#bodyInner' ).tooltip();
});

这是迄今为止我所做的。

Answer 1

您可以使用positionjQuery UI 工具提示中的选项来实现与工具提示定位相关的任何操作。jQuery UI Position 选项包含许多其他选项，例如my等at。一旦这样的选项是within. 这可以用来限制一个元素在另一个元素中的位置。

在这里，工具提示的位置可以包含在父元素中，只需按如下方式初始化工具提示即可。

$( '#bodyInner' ).tooltip({
    position:{ within: "#bodyInner"}
});

这是演示。