2

trからのホバーで使用されているツールチップがあります。オーバーフローを使用していくつかを非表示にしているので、ユーザーは下にスクロールしてすべてを表示できます。ツールチップが正しく表示されるように、オーバーフロー内の要素の位置を更新するにはどうすればよいですか？

私が持っているコードは次のとおりです

$('.toolTips tbody tr').each(function () {
// options
var distance = 10;
var time = 100;
var hideDelay = 50;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(this);
var popup = $('.popup', this).css('opacity', 0);
var p = trigger.position();
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
  // stops the hide event if we move from the trigger to the popup element
  if (hideDelayTimer) clearTimeout(hideDelayTimer);

  // don't trigger the animation again if we're being shown, or already visible
  if (beingShown || shown) {
    return;
  } else {
    beingShown = true;

    // reset position of popup box
    popup.css({
      top: p.top-20,
      left: p.right+60,
      display: 'block' // brings the popup back in to view
    })

    // (we're using chaining on the popup) now animate it's opacity and position
    .animate({
      top: '-=' + distance + 'px',
      opacity: 1
    }, time, 'swing', function() {
      // once the animation is complete, set the tracker variables
      beingShown = false;
      shown = true;
    });
  }
}).mouseout(function () {
  // reset the timer if we get fired again - avoids double animations
  if (hideDelayTimer) clearTimeout(hideDelayTimer);

  // store the timer so that it can be cleared in the mouseover if required
  hideDelayTimer = setTimeout(function () {
    hideDelayTimer = null;
    popup.animate({
      top: '-=' + distance + 'px',
      opacity: 0
    }, time, 'swing', function () {
      // once the animate is complete, set the tracker variables
      shown = false;
      // hide the popup entirely after the effect (opacity alone doesn't do the job)
      popup.css('display', 'none');
    });
  }, hideDelay);
});
});

これが私のテスト環境です

http://listeningbirddevelopment.com/portal/

4

3 に答える 3

2

私はこれらの場合にjQueryUI位置APIを使用することを好みます。これは、指定したとおりにすべてと位置を適切に処理します。

注：これにはjQuery UI libが必要です。これは、jQuery http://jqueryui.comからダウンロードするか、https：//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-uiから使用できます。 min.js

だからあなたの場合はそうなると思います

popup.position ({
    of: trigger,
    my: "center top",
    at: "center bottom"
})
于 2012-04-04T19:55:32.487 に答える
1

テーブル行の初期位置に基づいてポップアップ位置を設定しています。スクロールすると、それはもはや有効な位置ではありません。trigger.position（）呼び出しをmouseoverイベントハンドラーに移動します。

于 2012-04-04T19:53:28.867 に答える
0

ここで...jqueryscrollイベントを使用して、ユーザーがボックスをスクロールしたかどうかを判断します。スクロールした場合は、それに応じてツールチップのcss上部の位置を更新します。

$('tr').hover(function(){
    $(this).find('.popup').show() /* you already have this code somewhere for showing the popup */
    $(this).find('.popup').addClass('hovered') /* Add a hovered class and remove it in the second function */
    **$(this).parent('table').scroll(function(){
        var distance = console.log($(document).scrollTop()); /* get the distance scrolled */
        $(this).find('.hovered').css('top' + distance) /* will move the tooltip based on how much has been scrolled
    })**
}, function(){
    $(this).find('.popup').removeClass('hovered')
});

太字のセクションを追加します。現在のコードを操作するには微調整が必​​要な場合がありますが、単語でどのように機能するかを次に示します。

ツールチップにカーソルを合わせたら、「ホバー」クラスを追加します。ホバーオフしたら取り外します。ただし、ツールチップが上がっているときにテーブルがスクロールされた場合は、スクロールされた距離を取得し、表示されているツールチップのcssにその距離を追加します。

コメントで質問があります。

于 2012-04-04T20:00:52.357 に答える