Keep tooltip inside of parent container

Question

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.

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();
});

This is so far I have done.

Answer 1

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"}
});

Here is the Demo.