Question

So I have this <div class="help"> (a help box or what you would call it) inside a <td> element. The help box is initially not displayed, but pops up when hovering over the <td>. The positioning of the help box is done via jQuery, by this small snippet:

var $help = $that.add($cousin).find("div.help").first();
var height = $help.parent().siblings().first().height();
$help.offset({
    top: $help.parent().offset().top + height,
    left: $help.parent().offset().left
});
$help.css("display", "block");

I find out if we have a help box, when hovering a <td> cell, get the height of the first of the first sibling of the <td> and then reposition. And this actually works!

…the first time. When hovering the <td> again the help box seems to be positioned outside the screen, as I see a horizontal scrollbar, whose width increases for each time I hover. So I guess there’s something wrong with my use of .offset(). The help <div> has position: absolute, but I don’t think this is CSS related.

Help a tall, handsome Swede out?

Answer 1

As per the comments:

See my fiddle here http://jsfiddle.net/gRoberts/h3T6u/ that shows how you can use css and the position property to achieve what your looking to do.

Hope that helps 😉