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/

• jquery

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.

I prefer using jQuery UI position API for these cases, it takes care of everything and positions nicely as you specify.

Note: You need jQuery UI lib for this which can be downloaded from jQuery http://jqueryui.com or use it from https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js

So in your case I think it will be,

popup.position ({
    of: trigger,
    my: "center top",
    at: "center bottom"
})

Here... use the jquery scroll event to determine if the user has scrolled the box, when it does, update the css top position of the tooltip accordingly:

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

Add the section that is in bold. Might require some tweaking to work with your current code, but here's how it works in words:

When the tooltip is hovered over, add the class "hovered". Remove it when you hover off. But if the table is scrolled during the time a tooltip is up, then get the distance that has been scrolled and add that distance to the css of the tooltip that is showing.

I'll be available for questions in comments.