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

Question

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

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

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

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

This is so far I have done.

Answer 1

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

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

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

这里是Demo。