将工具提示保留在父容器中 [英] Keep tooltip inside of parent container

问题描述

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

I am using jQuery UI Tooltip in a web app. By default the position of the tooltip is bottom-left of the 'tool-tipped element'. However, when the tooltip will not fit in the browser window, it switches to bottom right.

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

This behavior is great, however rather than determining whether to position the tooltip bottom right or bottom left based on the width of the browser window, I would like to determine this based on the width of a parent container, so that the tooltips do not display outside of an area that I determine.

请注意，我知道如何使用API​​手动控制位置，我正在寻找一种方法来全局控制位置逻辑.

Please note I am aware of how to control the position manually with the API, I am looking for away to control the logic of the positioning globally.

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

到目前为止，我已经完成了.

推荐答案

您可以使用 position 选项. jQuery UI Position选项包含许多其他选项，例如my，at等.一旦此选项为 .这可以用来限制一个元素在另一个元素内的位置.

You can achieve anything related to positioning of tooltip using the position option in the jQuery UI Tooltip. The jQuery UI Position option contain many further options such as my, at etc. Once such option is within. This can be used to limit the position of an element within another.

在这里，只需按如下所示初始化工具提示即可将工具提示位置包含在父元素中.

Here, the tooltips position can be contained within the parent element simply by initializing the tooltip as follows.

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

这是演示.

这篇关于将工具提示保留在父容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！