CODEWITHSUNDEEP
javascriptd3.js
Rishabh
Rishabh

Reputation: 900

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)

Upvotes: 0

Views: 97

Answers (1)

Tim B
Tim B

Reputation: 1983

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.

Upvotes: 1

Related Questions