使用JS函数生成并渲染光标附近的html内容

Question

我需要在D3图表的图例上显示工具提示。我阅读了文档，但找不到图例是否支持工具提示。然而，我能够找到鼠标悬停事件。

我想用java脚本函数在光标附近呈现一个表。

我有以下方法：

/**
* Creates legend
* barData - data from given (i.e. mouse is currently hover it)
*/
function createLegendTooltip(data) {
var tooltip =
'<table><tr>' +
'<td>' +
'<div style="width:10px;height:10px;border:1px solid #000;background-color:' + data.color + '"></div>' +
'</td><td>' +
data.instance +
'</td></tr><tr><td> </td><td>' +
data.saver + ', karan' + data.saveTime +
'</td></tr></table>';
return tooltip;
}

tooltip有我想要显示的正确数据，但我不知道如何在光标附近呈现这些数据。

Answer 1

body.在鼠标悬停事件中，您可以使用pageX和pageY获取鼠标位置。然后你就知道鼠标在屏幕上的位置了。有了这些信息，您可以创建一个div并将其定位在鼠标所在的位置。您可以使用从createLegendTooltip返回的html字符串，并将其应用于带有.innerHTML 的div

下面是一个非常通用的例子。你还需要做更多的事情。例如，设置z索引，如果你想让coolDiv在鼠标移动时移动，还可以创建一个函数来更新它的位置。

var coolDiv = document.createElement('div');
coolDiv.innerHTML = createLegendTooltip(data);
coolDiv.style.left = yourValueYouGetFrom_pageX;
coolDiv.style.top = yourValueYouGetFrom_pageY;
document.body.appendChild(coolDiv);