Absolute positioned element overflows display in flot tooltip

Question

I'm using jQuery Flot in my app but I have a problem with my most right tooltip which is at the end of the window. As you can see from the img below when I hover left point on the green line of graph everything is ok. But when I hover most right point on the green line of graph my tooltip element overflows the window.

Css for tooltip element:

$("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #222",
    padding: "2px 5px",
    "background-color": "#000",
    opacity: 0.80,
    zIndex: 999,
    color: "#fff"
}).appendTo("body");

What can I do to make this last tooltip to be normally visible?

Thanks for help.

Answer 1

For points at the right edge of the chart, you should position the tooltip to the left of the point. For example:

function showTooltip(_x, _y, _contents) {
    var _cssParams = {
        position: 'absolute',
        display: 'none',
        border: '1px solid #222',
        padding: '2px 5px',
        'background-color': '#000',
        opacity: 0.80,
        zIndex: 999,
        color: "#fff"
    };
    if (_x < 0.8 * $(window).width()) {
        _cssParams.left = _x + 10;
    }
    else {
        _cssParams.right = $(window).width()- _x + 3;
    }
    if (_y < 0.8 * $(window).height()) {
        _cssParams.top = _y + 3;
    }
    else {
        _cssParams.bottom = $(window).height()- _y + 3;
    }
    $('<div id="tooltip">' + _contents + '</div>').css(_cssParams).appendTo('body').fadeIn(100);
}