Flot - plothover不能在屏幕右侧工作？

Question

在某些情况下，似乎plothover不能在屏幕的右侧或中间侧工作。如果我在图形应该放置的地标周围放置一个宽度为100％的div，它可以正常工作。如果我在宽度为75％的 周围放置一个div，则flot图的右侧不显示任何工具提示或完全悬停。我正在使用jQuery 1.11.1，jQuery UI 1.10.4和flot 0.8.3。看看我的代码并告诉我你的想法。我很难过。

<div id="thing" style="width: 100%">
    <div id="aReport" width="75%">
        <div class="report-header">
            <h1>Recovery Profile: </h1>
            <h1>
                blah blah
            </h1>
            <div class="report-nav">
                <a href="#" class="help-btn">
                    <img src="resources/images/report-nav-help.png" alt="Help" />
                </a>
                <div id="roll-help"></div>
            </div>
        </div>
        <div id="report-content">

            <h1>Overview</h1>
            <div id="spinnerID2" class="spinnerDiv">
                <!-- <img src='<c:url value="/resources/images/large_spinner_dharma.gif"/>' class="spinner" alt="Please Wait"/> -->
                <h3>Loading...</h3>
            </div>
            <div id='graph-profile-main'></div>
            <div id="help-container">
                <div id="help-content">
                </div>
            </div>
        </div>
    </div>
</div>

脚本

var graph1 = [
        [1210831200000, 7.01],
        [1213596000000, 4.77],
        [1216188000000, 6.77],
        [1222322400000, 8.39],
        [1229497200000, 4.64],
        [1231225200000, 4.61],
        [1241157600000, 5.37],
        [1278655200000, 4.02],
        [1288245600000, 4.85]
    ];
    var graph2 = [
         [1228374000000, 3.8],
         [1232521200000, 4.32],
         [1238997600000, 5.55],
         [1247810400000, 5.84],
         [1255413600000, 4.02],
         [1263452400000, 4.02],
         [1270447200000, 4.02],
         [1278396000000, 4.02],
         [1286258400000, 3.68],
         [1294815600000, 5.02],
         [1301637600000, 4.02],
         [1312351200000, 4.02],
         [1320822000000, 3.31],
         [1325574000000, 3.31],
         [1334124000000, 5.45],
         [1335420000000, 4.02],
         [1386778782000, 3.68],
         [1387560819000, 5.74]
    ];
    var tooltip1 = [
     ["<b>Tooltip1</b>"],
     ["<b>Tooltip2</b>"],
     ["<b>Tooltip3</b>"],
     ["<b>Tooltip4</b>"],
     ["<b>Tooltip5</b>"],
     ["<b>Tooltip6</b>"],
     ["<b>Tooltip7</b>"],
     ["<b>Tooltip8</b>"],
     ["<b>Tooltip9</b>"],
    ];
    var tooltip2 = [
     ["<b>Tooltip1</b>"],
     ["<b>Tooltip2</b>"],
     ["<b>Tooltip3</b>"],
     ["<b>Tooltip4</b>"],
     ["<b>Tooltip5</b>"],
     ["<b>Tooltip6</b>"],
     ["<b>Tooltip7</b>"],
     ["<b>Tooltip8</b>"],
     ["<b>Tooltip9</b>"],
     ["<b>Tooltip10</b>"],
     ["<b>Tooltip11</b>"],
     ["<b>Tooltip12</b>"],
     ["<b>Tooltip13</b>"],
     ["<b>Tooltip14</b>"],
     ["<b>Tooltip15</b>"],
     ["<b>Tooltip16</b>"],
     ["<b>Tooltip17</b>"],
     ["<b>Tooltip18</b>"],
    ];
    var datasets = {
        'GRAPH1': {
            data: graph1,
            tooltip: tooltip1,
            label: 'Label1'
        },
        'GRAPH2': {
            data: graph2,
            tooltip: tooltip2,
            label: 'Label2'
        },
    };
    var dMin = new Date(2007, 1, 15);
    var dMax = new Date(2014, 6, 20);

    var arrColors = ["#000099", "#D6A23C", "#C18F73"];
    var options = {
        canvas: true,
        grid: {
            hoverable: true,
            clickable: true,
            borderWidth: 0,
            markings: [
                { color: '#000', lineWidth: 1, xaxis: { from: dMin, to: dMin } },
                { color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } }
            ]
        },
        yaxis: { min: 0, max: 10 },
        xaxis: {
            min: dMin,
            max: dMax,
            mode: 'time',
            timeformat: '%b %y',
            monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        colors: arrColors,
        lines: { show: true },
        points: { show: true },
        legend: { show: false }
    };
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
    var previousPoint = null;
    $("#graph-profile-main").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint !== item.datapoint) {
                previousPoint = item.datapoint;
                $("#tooltip").remove();
                showTooltip(item.pageX, item.pageY, item.series.tooltip[item.dataIndex]);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
    $("#graph-profile-main").bind("plotclick", function (event, pos, item) {
        if (item) {
            clicked(item);
        }
    });

    var i = 0;
    $.each(datasets, function (key, val) {
        val.color = i;
        ++i;
    });

    function plotAccordingToChoices() {
        var data = [];
        data.push(datasets.GRAPH1);
        data.push(datasets.GRAPH2);
        if (data.length > 0) {
            var dataPlot = $.plot($("#graph-profile-main"), data, options);
        }
    }
    plotAccordingToChoices();

    function clicked(item) {
        return false;
    }

    $("#spinnerID2").hide();
    $("#report").addClass("greyBkd");
    $("#graph-profile-main").removeClass("displayNone");