我有一个 jQuery 工具提示,如以下链接所示:
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;
}
使用Jquery如下:
$("#child").tooltip({
track: true,
tooltipClass: "tooltipclass"
});
现在,当我将鼠标悬停在“子项”上时,我不希望工具提示移动到父项之外,即工具提示应动态限制在“父项”内。
最佳答案
使用position
jQueryUI Tooltip 的 API 中的选项。 position
选项使用 jQuery UI Position
所以一定要调查一下。
$("#child").tooltip({
track: true,
tooltipClass: "tooltipclass",
position: { within:"#parent"}
});
演示: http://jsfiddle.net/dirtyd77/6EZHZ/
希望这对您有所帮助,如果您有任何其他问题,请告诉我。
关于Jquery UI 工具提示移出父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16412012/