Rishabh Rishabh - 24 days ago 5
Javascript Question

tooltip on chart not working

I've created a line-chart in D3 (with angular) and trying to implement tooltips. The problem is, when I append the tooltip DIV to directive element, it doesn't work, while it works fine if I append the div to body (which I don't want):

// not working
// d3.select(element[0]).append() doesn't work either
var div = g.append("div")
.attr("class", "tooltip")
.style("opacity", 0);

// works fine
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);


Here is the JSFiddle. (line 69)

Answer

You can't use HTML elements (such as div) inside a SVG, unless you use a foreign object (not supported by all browsers). You can create your tooltip using a rect element.

Comments