7

次のリンクにある 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"
});

「子」にカーソルを合わせると、ツールチップが親の外側に移動したくありません。つまり、ツールチップは「親」内に動的に制限される必要があります。

4

2 に答える 2

6

positionjQueryUI Tooltip の API でオプションを使用します。positionオプションが使用するjQuery UI Positionので、それを調べてください。

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

デモ: http://jsfiddle.net/dirtyd77/6EZHZ/

他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-05-07T05:57:31.873 に答える