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.
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.
try this
jsfiddle
$("#child").tooltip({
track: true,
tooltipClass: "tooltipclass",
position: { my: "left top+15", at: "left bottom", collision: "flipfit" }
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With