Абсолютные позиционные переполнения элемента отображаются во всплывающей подсказке

Question

Я использую jQuery Flot в своем приложении, но у меня проблема с моей самой правой подсказкой, которая находится в конце окна.Как вы можете видеть из рисунка ниже, когда я наведу левую точку на зеленой линии графика, все в порядке.Но когда я наведу самую правую точку на зеленой линии графика, мой элемент всплывающей подсказки выходит за пределы окна.

Css для элемента всплывающей подсказки:

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

Что я могу сделать, чтобы последняя подсказка была нормально видимой?

Спасибо за помощь.

Answer 1

Для точек на правом краю диаграммы вы должны расположить всплывающую подсказку слева от точки.Например:

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);
}