Search code examples
d3.jstooltip

Multiple mouseover events with d3.tip

I am trying to change the stroke of an svg element that also has d3.tip called upon it.

The relevant part of my code looks as follows:

    map.call(tip);

    map.on("mouseover", function(){ d3.select(this).style({stroke:"#7bd362"}); tip.show; });

    map.on("mouseout",tip.hide);

I am able to make my code do one event: have its stroke changed on mouseover, or show a tooltip. But I cannot make the two events happen simultaneously.

Has anyone had success with d3 tip before and additional mouse events before?

Solution

  • I ended up needing to pass the data object in to the tip.show() function.

    The final code:

    map.on("mouseover", function(d){ 
  tip.show(d); 
 })
 .on("mouseout", function(d){
  tip.hide(d);          
});

    I haven't tried it, but this may also work:

    map.on("mouseover", tip.show).on("mouseout", tip.hide);