Question

所以我一直在尝试将flot整合到我们的一些标准报告中。我查看了一些flot示例，并拼凑了一些代码，这些代码根据我们生成报告的一些数据生成了一个flot图。

从其中一个flot示例中，我发现您可以通过一些javascript在图表上显示工具提示。它很棒。我似乎无法解决的一个问题是工具提示。有时，当工具提示位于图形的最右侧时，它会从页面的一侧渲染出来，它会从页面的一侧渲染出来。

这是有问题的，因为为了清楚地读取此时的工具提示，您必须向右滚动页面，同时将鼠标保持在相关数据块上。为了解决这个问题，当光标超过绘图区域的左半部分时，我试图将工具提示渲染到光标的左侧。但是，到目前为止，我只能确定光标何时超过屏幕的左半部分，而我重新定位div的尝试却没有用。

相关守则：

function showTooltip(x, y, msg) {
    flot_tooltip = $("<div id = 'flot_tooltip'>" + msg + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #000',
        background: '#eee',
        padding: '2px',
        opacity: '0.75'
    }).appendTo('body').fadeIn(150)
    adjustForX(flot_tooltip)
}

function adjustForX(flot_tooltip){
    if ($(flot_tooltip).offset().left > window.innerWidth/2) {
        //alert($(flot_tooltip).width())
        //next need to adjust the left position of the element
    }
}

完整Fiddle

对于冗长的解释感到抱歉，任何指导都会非常感激。

Answer 1

我在其中一个网页上遇到了同样的问题，并使用此代码解决了这个问题：

function showTooltip(x, y, contents) {
    var params = {
        position: 'absolute',
        display: 'none',
        border: '2px solid #333333',
        'border-radius': '3px',
        padding: '3px',
        size: '10',
        'background-color': 'lightyellow',
        opacity: 0.90
    };
    if (x < 0.8 * $(window).width()) {
        params.left = x + 20;
    }
    else {
        params.right = $(window).width() - x + 20;
    }
    if (y < 0.8 * $(window).height()) {
        params.top = y + 5;
    }
    else {
        params.bottom = $(window).height() - y + 10;
    }
    $('<div id="tooltip">' + contents + '</div>').css(params).appendTo('body').fadeIn(200);
}

这里我将x和y位置值与窗口大小进行比较，如果鼠标位置靠近右边框并位于鼠标位置上方，则将工具提示放在鼠标位置的左侧。它接近底部。

根据宽度调整绝对div的位置

1 个答案: