Question

I’m trying to position a floating tooltip on my webpage, and I want it so that if the tooltip is going to hang over the right edge of the window, it should flip it around the other way. Here’s what I’ve got:

$('[data-tooltip]').mousemove(function(e) {
    var left = e.pageX + 1;
    if(left + $kewtip.outerWidth() > ?????) {
        left = e.pageX - $kewtip.outerWidth() - 1;
    }
    var top = e.pageY - $kewtip.outerHeight() - 1;
    $kewtip.css({
        left: left,
        top: top
    });
});

I don’t know what to fill in for the question-marks. left + $kewtip.outerWidth() should give me the right edge of the tooltip, and I want to check if that’s greater than the right edge of the window.

$(window).width() won’t work, particularly when you’ve scrolled horizontally a bit.

Answer 1

Have you tried adding in the scroll position?

$(window).width() + $(document).scrollLeft()