`MouseOut` was called too often
Firstly, Nice library. :)
When using your example with tooltip, I would have really benefitted if the corresponding exemplar CSS for the tooltip was also provided in the README...
In particular, I feel it would have been nice to point out the .venntooltip class should have the CSS attribute pointer-events set to none. Otherwise, d3 calls mouseout event way too many times (i.e. even if I'm still hovering over one of the venn diagram elements, the tooltip would disappear randomly (Possibly, because d3 thinks that I've moved onto .venntooltip.
This is the CSS I ended up using:
.venntooltip {
position: absolute;
text-align: center;
width: 128px;
min-height: 36px;
background-color: #323232;
background: #323232;
color: #fff;
padding: 10px 8px;
border: 0px;
border-radius: 0 0 50% 50%;
border-radius: 2px;
opacity: 0;
font-size: 1rem;
line-height: 120%;
max-width: calc(100% - 4px);
overflow: hidden;
pointer-events:none;
}
Thanks! I'm thinking of actually moving the tooltip into the library by default - it seems like something that most people use. When i do this, I will default the CSS like you've suggested
better to use mouseenter and mouseleave