CODEWITHSUNDEEP
javascriptjqueryd3.js
user2869931
user2869931

Reputation: 47

d3js SVG:title tooltip doesn't show up

d3js SVG:title tooltip doesn't show up

I have a graph which contains a lot of circles, now I would like to insert to each circle a tooltip but it doesn't work neither as title in circle nor as tooltip box. I cannot find my mistake:

var circleSmall = canvas.append("circle")
             .attr("cx", 869)
             .attr("cy", 693)
             .attr("r", 10)
             .attr("fill", "green") 
.append("svg:title").text("Your tooltip info")
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})

http://jsfiddle.net/WLYUY/57/

Upvotes: 1

Views: 2233

Answers (1)

FernOfTheAndes
FernOfTheAndes

Reputation: 5015

The most important obstacle here was your rects. They were appended AFTER the circles and were preventing mouse events from reaching the circles. So, first thing to do is:

/* do this or append circles AFTER appending recs */
rect {
    pointer-events: none;
}

I have added the mouseover and mouseout events necessary to show/hide the tooltip.

Complete FIDDLE here.

NOTE: For demonstration, I have painted the one circle receiving the events in large orange with an orange-red border (you can't miss it). This is just an example...normally you would apply the event listeners to all circles. And this brings me to a sanity check: you are currently appending shapes "manually" but I assume you will eventually do it based on data binding, one of the main points of D3.

Upvotes: 3

Related Questions