benfred / venn.js

Area proportional Venn and Euler diagrams in JavaScript
MIT License
1.04k stars 218 forks source link

`MouseOut` was called too often #89

Open IsmailM opened 7 years ago

IsmailM commented 7 years ago

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;
}
benfred commented 7 years ago

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

sgratzl commented 4 years ago

better to use mouseenter and mouseleave