0

このフィドルを見てください：http：//jsfiddle.net/BramVanroy/tKL8E/

「連絡先」にカーソルを合わせてから、そのサブアイテム「広告」にカーソルを合わせると、ツールチップがアイテムの横ではなく上に表示されます。次に、マウスを使って「連絡先」に戻り、再び「広告」に戻ると、ツールチップが正常に表示されます。どうすればいいの？

関連コード：

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

tooltip.stop(true).text(title).animate(properties, 300).fadeTo(200, 1);
4

1 に答える 1

0

これは、新しいテキストをツールチップに設定する前、またはブラウザ エンジンが要素のサイズを再計算する前に、ツールチップの幅に基づいて左の位置を計算するためです。

解決策または回避策を見つけるためにもう一度確認させてください。

更新： コードフラグメントを次のように変更します

tooltip.stop(true).text(title); // set the new text here

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

//and not here as you use width property to calculate the element position which is being changed when you change element text
tooltip.animate(properties, 300).fadeTo(200, 1);

これをチェックしてくださいhttp://jsfiddle.net/tKL8E/42/

于 2013-01-13T14:41:56.150 に答える