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

对于这些情况，我更喜欢使用jQuery UI 位置 API，它会按照您的指定很好地处理所有内容和位置。

注意：您需要 jQuery UI 库，可以从 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

这里......使用jquery滚动事件来确定用户是否滚动了框，当它滚动时，相应地更新工具提示的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 回答