绝对定位元素溢出显示在flot工具提示中

Question

我在我的应用程序中使用jQuery Flot但是我的最右边的工具提示存在问题，这是在窗口的末尾。正如你从下面的img中看到的那样，当我将左边的点悬停在图表的绿线上时，一切都还可以。但当我将最右边的点悬停在图表的绿线上时，我的工具提示元素溢出了窗口。

工具提示元素的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);
}