Skip to content

Tooltip properties

PropertiesDescription
children(optional) Provide a string or a React Element to be shown as the tooltip content.
active(optional) set to true the tooltip will show up.
position(optional) defines the offset position to the target element the arrow appears. Can be top, right, left and bottom. Defaults to top.
align(optional) defines the offset alignment to the target element the arrow appears. Can be center, right and left. Defaults to center.
arrow(optional) defines the direction where the arrow appears. Can be center, top, right, bottom and left. Defaults to center.
skipPortal(optional) set to true to disable the React Portal behavior. Can not be used when group is used. Defaults to false.
showDelay(optional) define the delay until the tooltip should show up after the initial hover / active state.
hideDelay(optional) define the delay until the tooltip should disappear up after initial visibility.
size(optional) defines the spacing size of the tooltip. Can be large or basis. Defaults to basis.
targetElement(optional) provide an element directly as a React Node or a React Ref that will be wrapped and rendered.
targetSelector(optional) specify a vanilla HTML selector by a string as the target element.
noAnimation(optional) set to true if no fade-in animation should be used.
fixedPosition(optional) If set to true, the Tooltip will be fixed in its scroll position by using CSS position: fixed;. Defaults to false.
group(optional) if the tooltip should animate from one target to the next, define a unique ID.
animatePosition(optional) set to true to animate a single Tooltip from one element to another element. You also need to set a unique group name.
Space(optional) spacing properties like top or bottom are supported.