Tengo algo de código para crear mi información sobre herramientas, pero no se mueve con el mouse, sino que ocupa todo el ancho de la página. Usé un ejemplo en la página d3.js.

 var tooltip = d3 .select("#chart") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("border-radius", "5px") .style("padding", "10px"); //creating mouseover function const mouseover = function (event, d) { const subgroupName = d3.select(this.parentNode).datum().key; const subgroupValue = d.data[subgroupName]; tooltip .html("Status: " + subgroupName + "<br>" + "Count: " + +subgroupValue) .style("opacity", 1); }; const mousemove = function (event, d) { tooltip .style("transform", "translateY(-55%)") .style("left", event.x / 2 + "px") .style("top", event.y / 2 - 30 + "px"); }; const mouseleave = function (event, d) { tooltip.style("opacity", 0); };

Esto es lo que parece cuando paso el cursor sobre una de las barras actualmente. https://i.stack.imgur.com/1nBjC.png