Tooltip

[krvikash35]

• show tooltip on hover on desktop, on mobile show it on long press or just disable it.
• don't create extra wrapper(div, span)
• accept position prop(left/right/top/bottom) but align properly at runtime if required. For example if target element is on near left side of screen then position tooltip to right.
• show arrow as visual guide for tooltip and target element
• give sensible motion/animation but give props to disable it.
• use javascript mouse enter and leave event instead of css pseudo class.
• disappear after short duration
• appear after short duration

[krvikash35]

Links

Material UI Tooltip doc Material UI Tooltip source Antd Tooltip doc Antd Tooltip source Material design tooltip doc reach-ui tooltip doc

Get ref of props.children by cloning Get props.children dom handle https://itnext.io/lets-create-a-tooltip-with-react-hooks-48d12cf06241

[krvikash35]

if we don't want extra wrapper for tooltip then either clone element or use hooks.

https://github.com/reach/reach-ui/issues/171

1. Component based API: target component will be child for Tooltip component, and child component need to forward ref.
2. Hooks based API: something like useTooltip that accept ref to element.