Use Tooltip component to create a tooltip positioned around any element.

Hello Tooltip
<Tooltip bg='black' color='white' bottom right>
  Hello Tooltip


The top and bottom props are not CSS positions. Setting the top prop will render the arrow pointing down, and setting bottom will render the arrow pointing up.

The physical position of the tooltip is dependent on its place in the code. Put it directly before the element to go on top, after it to go on bottom.


bgstringBackground color
colorstringFont color
bottomboolTooltip is below content
topboolTooltip is above content
centerboolCentered horizontally
leftboolTowards the left above/below content
rightboolTowards the right above/below content
zIndexnumber or String(default auto)