CODEWITHSUNDEEP
d3.js
Vishu
Vishu

Reputation: 338

D3: position tooltip outside Donut Chart

I have made a basic Donut chart using d3 and added a tooltip to this donut.

Problem: When i hover on the left side of the donut, tool tip appears outside. enter image description here

But when i hover on left side of donut the tooltip appears inside of donut enter image description here

How do i keep the tooltip always outside?

Upvotes: 0

Views: 625

Answers (1)

Vishu
Vishu

Reputation: 338

I solved this by setting appropriate top and left to the tooltip, onMouseMove with help of event.pageX and event.pageY

.on("mousemove", function(d, i) {
  tooltip.style("top", event.pageY - 10 + "px");
  if (event.pageX < 360) {
    tooltip.style("left", event.pageX - 80 + "px");
    d3.select(".donut_arrow_box").attr("class", "left donut_arrow_box");
  } else {
    tooltip.style("left", event.pageX + 10 + "px");
    d3.select(".donut_arrow_box").attr("class", "right donut_arrow_box");
  }
})

Upvotes: 1

Related Questions