Question

I have a tooltip being used on hover from a tr. I am using overflow to hide a few so a user can scroll down to see all of them. How can I update the position of the element within the overflow so the tooltip shows up correctly?

The code I have is as follows

$('.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);
});
});

Here is my testing environment

http://listeningbirddevelopment.com/portal/

Answer 1

You are setting the popup position based on the initial position of the table row. Once you scroll that is no longer a valid position. Move the trigger.position() call into the mouseover event handler.