Jquery UI Tooltip moves out of parent div

Question

I have a jQuery tooltip as given 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;
}

With Jquery as follows:

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

Now when i hover over 'child' i don't want the tooltip to move outside parent i.e the tooltip should be confined within the 'parent' dynamically.

Answer 1

Use position option in jQueryUI Tooltip's API. The position option uses jQuery UI Position so make sure look into that.

$("#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 this

jsfiddle

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