Tooltip

Prop Optional Initial Type
direction ✓ up string
parent ✓ undefined [DOM reference]
width ✓ 200 integer
margin ✓ 0 0 0 0 string
Responsive
The parent of the tooltip can be any size and the tooltip renders correctly on any screen orientation!

Remember to give the parent element position: relative; and pass it down as the parent prop to get the most out of this component!

Easy to use
Simply import and use anywhere!

Flexible
Your tooltip can contain anything, not just text.

Static version supported
If you don't want the tooltip to be reactive to the viewport, simply omit the parent prop and it will work as a normal tooltip.
Hover
me!
This tooltip contains a bunch of information and no matter where it is on the screen it will not clip outside the viewport!

HOLD SHIFT to
move around.
Prop Value
direction up
parent [DOM reference] [DOM reference]
width 200
margin 0 0 0 50
<Tooltip direction="up" parent="[DOM reference]" width={200} margin="0 0 0 50" > Hover me! </Tooltip>