JQuery UI Tooltip moves from parent div

Question

I have a jQuery tooltip indicated in the following link:

http://jsfiddle.net/ronnykroy/amYZW/2/

HTML:

<div id="parent"> <div id="child" title="It has been a very long text"> </div> </div> 

CSS

 #parent{ position:absolute; width: 500px; height: 200px; background-color:#00f; } #child{ position:absolute; left:400px; width: 100px; height:150px; background-color: #f00; } .tooltipclass{ width: 50px; background-color: #ffffff; color: #000000; } 

Using jQuery:

 $("#child").tooltip({ track: true, tooltipClass: "tooltipclass" }); 

Now that I hover over the "child", I do not want the tooltip to move outside the parent. The hint should be limited inside the "parent" dynamically.

Answer 1

Use position in jQueryUI Tooltip API. The position option uses jQuery UI Position , so make sure.

 $("#child").tooltip({ track: true, tooltipClass: "tooltipclass", position: { within:"#parent"} }); 

DEMO: http://jsfiddle.net/dirtyd77/6EZHZ/

Hope this helps and let me know if you have any other questions.

Answer 2

try it

jsfiddle

 $("#child").tooltip({ track: true, tooltipClass: "tooltipclass", position: { my: "left top+15", at: "left bottom", collision: "flipfit" } });