Question

我有一个工具提示用于从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/

Answer 1

我更喜欢在这些情况下使用jQuery UI position 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"
})

Answer 2

您正在根据表格行的初始位置设置弹出位置。滚动后，它不再是有效位置。将trigger.position（）调用移动到mouseover事件处理程序。

Answer 3

这里...使用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')
});

添加粗体部分。可能需要进行一些调整才能使用您当前的代码，但这里的工作原理如下：

当工具提示悬停时，添加“hovered”类。当你盘旋时删除它。但是如果在工具提示启动期间滚动表格，则获取已滚动的距离并将该距离添加到显示的工具提示的css。

我会在评论中提出问题。

jquery位置和溢出

3 个答案: