mouse into the flipped up tooltips

[oakmac]

You can't currently mouse into the tooltips that are "flipped up" when at the bottom of the screen.

This will be a little tricky as the mouse position code is complex.

@LesleyMdCampo - want to take a look?

[oakmac]

Recording some chat I had about this issue:

---

you're supposed to be able to "mouse into" a tooltip when it's showing

and this is a bit tricky because I'm not using mouseenter, mouseleave events for it

because the bounds of the tooltip element aren't a great way to determine whether the mouse should be considered "inside" of the element

basically: if the mouse is over a link, or close to the arrow, or actually inside the tooltip

then you want it to be remain on the screen

so when a tooltip is shown, it calculates some boxes of coordinates

and stores those in an atom

and it checks against those to determine what to do with the tooltip

so the mouse position on the screen is constantly being recorded and checked against those boxes when a tooltip is showing

anyway - those boxes are calculated expecting the tooltip to be BELOW the link tag

so when the tooltip is flipped up, you'll have to determine a different mouse bounds

pretty sure it happens in this atom: https://github.com/oakmac/cljs-cheatsheet/blob/master/cljs-client/cljs_cheatsheet_client/state.cljs#L6

pretty sure there are two boxes it records

one for the tooltip bounds and one for the link bounds

and it just dumbly extends the link bounds "into" the tooltip bounds

since it knows the tooltip will be below

actually, you can try this yourself, just follow these instructions exactly:

go to the cheatsheet

scroll so that there is a link near the bottom, but leave some space at the bottom, like 30px

mouse onto a link, tooltip should appear above it

slowly drag your mouse BELOW the link

notice when the tooltip disappears?

see how it's a bit more pixels that it probably should be?

like - your mouse is 10px below the link, but the tooltip is still displaying

that's that padding I was talking about before

also if you mouse ABOVE the link, it disappears immediately

and you can't "mouse into" it

the tooltip code is tricky

and probably needs to be improved

[azizzaeny]

also there is an issue on mobile phones when you mouse over or taping the link...