javascript - 使用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;
}

工具提示具有我打算显示的正确数据，但我无法弄清楚如何在光标附近呈现此数据。

Answer 1

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

下面是非常通用的示例。你还有更多要做的事。例如，设置 z-index 并创建一个函数来更新 CoolDiv 的位置(如果您希望它在鼠标移动时移动)。

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