With this version of babel (via babel-eslint), eslint now fails
with a somewhat confusing, "Unexpected reserved type number"
(from the flow plugin...) if you get this wrong.
This adds a more complex trapezoidal safe area between the button that triggers
the tooltip and the tooltip itself. It should be easier to move from the button
into the tooltip without accidentally closing it.
Fixes https://github.com/vector-im/riot-web/issues/10185
This reworks the API the `InteractiveTooltip` component so that it's more
natural to use just like other React components. You can now supply the target
component as a child and the tooltip content as a prop.
In addition, this tweaks the interactivity to keep the tooltip on screen until
you move the mouse away from the tooltip and its target.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
This adjusts the positioning to work more the way we want:
* Tooltip is position on the top or bottom edge of the target depending on where
space is available
* Tooltip and chevron are centered
In addition, more bits borrowed from `ContextualMenu` are not needed, so they
have been removed for simplicity.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
As part of reactions and editing work, we're adding a new style of tooltip that
allows interacting with the content of the tooltip. `ContextualMenu` is closest
out of the things we have today, but it doesn't position in quite the way we
want and it's already quite complex.
To get started, let's first clone that to a new `InteractiveTooltip`.
Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
