0

我正在尝试按照此示例向浮动图添加工具提示。但是工具提示没有出现。

$(document).ready(function(){
    $("#plotarea").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
          $("#charttooltip").remove();
        var x = item.datapoint[0].toFixed(2),
        y = item.datapoint[1].toFixed(2);
        showChartTooltip(item.pageX, item.pageY,'tooltip text to display');
        } else {
          $("#charttooltip").remove();
        }
    });
});

function showChartTooltip(x, y, contents) {
        $('<div id="charttooltip">' + contents + '</div>').css( {
              position: 'absolute',
              display: 'visible',
              'z-index': 100,
              top: y + 5,
              left: x + 5,
              border: '1px solid #bfbfbf',
              padding: '2px',
              'background-color': '#ffffff',
              opacity: 1                              
        }).appendTo($('#main_body')).fadeIn(200);
        } 
</script>

<div class="main_body"> //->is present in the html

如果调用了 showChartTooltip 方法，我检查了 firebug。这行得通。当我逐步执行代码时，一切似乎都按预期工作，只是我不知道我可以在 firebug 中判断谁 appendTo 调用是否成功。

这是我想检查的第一件事，因为工具提示没有出现。我还插入了一个非常高的 z-index 以确保这不是问题。

如果有人知道还有什么可能是错的。我非常感谢您的评论。

4

2 回答 2

1

在 firebug 中打开 HTML 面板并展开 body 元素，如果添加了 id=charttooltip 的 div，则该方法有效。让我知道这是否是问题所在。

于 2010-01-26T11:30:36.467 回答
1

如果&lt;s 等实际上存在于您的代码中，那么这几乎肯定是您的问题。您需要编写实际的 html 作为参数：

$('<div id="charttooltip">' + contents + '</div>')
于 2010-01-26T11:32:00.560 回答