时间戳

首页 > 解决方案 > 使用 JS 函数在光标附近生成和渲染 html 内容

javascript - 使用 JS 函数在光标附近生成和渲染 html 内容

问题描述

我需要在 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正确数据，但我无法弄清楚如何在光标附近呈现这些数据。

标签： javascriptd3.js

解决方案

body.In your mouseover 事件中，您可以使用 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);

推荐阅读