CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
Nikunj Aggarwal
Nikunj Aggarwal

Reputation: 397

d3.js onmousehover

I wrote this code using d3.js.

Here's my problem:

When you mouse over the rectangles, the pop up tooltip appears, but not when the pointer is over the text within the rectangle.

I would like the tooltip to appear when the mouse is over the text as well as the other parts of the shape. How can this be accomplished?

Here's my code for the rectangle:

cartridgeRectangles.push({"x_axis":startx+2, "y_axis":90+textbeginy, "width":35,       "height":15, "color":discovery_status_color, "stroke":"#33CC33", "thickness":1, "mover":chassisDetails , "movercolor":"darkgreen", "mout":"True", "moutcolor":"#33CC33" });

Upvotes: 2

Views: 160

Answers (1)

Pablo Navarro
Pablo Navarro

Reputation: 8264

The problem is that the text is capturing the mouse. This can be avoided by removing the pointer events for the text in css:

// This will apply to all text elements, consider using a class
text {
  pointer-events: none;
}

More information in pointer events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Upvotes: 2

Related Questions