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

Question

我在我的应用程序中使用 jQuery Flot，但是我最右边的工具提示有问题，它位于 window 的末尾。正如您从下面的 img 中看到的那样，当我将鼠标悬停在图表的绿线上时，一切正常。但是当我将最右边的点悬停在图表的绿线上时，我的工具提示元素会溢出 window.

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

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

Absolute positioned element overflows display in flot tooltip

javascript

css

jquery

flot

absolute