jquery - Jquery UI Tooltip 移出父 div

Question

我有一个 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"
});

现在，当我将鼠标悬停在“子”上时，我不希望工具提示移到父级之外，即工具提示应该动态地限制在“父级”内。

Answer 1

position在 jQueryUI Tooltip 的 API 中使用选项。该position选项使用jQuery UI Position，所以一定要调查一下。

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

演示：http: //jsfiddle.net/dirtyd77/6EZHZ/

希望这会有所帮助，如果您有任何其他问题，请告诉我。

Answer 2

尝试这个

jsfiddle

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