InformationToolTip

InformationTooltip display informative text when users hover over, focus on, or tap on InformationCircle.

<InformationToolTip title="Add" placement="top"></InformationToolTip>

Props

PropTypeDefaultDescription
arrowboolfalseIf true, adds an arrow to the tooltip.
childrenelementTooltip reference element.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
disableFocusListenerboolfalseDo not respond to focus events.
disableHoverListenerboolfalseDo not respond to hover events.
disableTouchListenerboolfalseDo not respond to long press touch events.
enterDelaynumber100The number of milliseconds to wait before showing the tooltip. This prop won't impact the enter touch delay (enterTouchDelay).
enterNextDelaynumber0The number of milliseconds to wait before showing the tooltip when one was already recently opened.
enterTouchDelaynumber700The number of milliseconds a user must touch the element before showing the tooltip.
idstringThis prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
leaveDelaynumber0The number of milliseconds to wait before hiding the tooltip. This prop won't impact the leave touch delay (leaveTouchDelay).
leaveTouchDelaynumber1500The number of milliseconds after the user stops touching an element before hiding the tooltip.
onClosefuncCallback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback.
onOpenfuncCallback fired when the component requests to be open. Signature: function(event: object) => void event: The event source of the callback.
openboolIf true, the tooltip is shown.
placement'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'right-end' | 'right-start' | 'top-end' | 'top-start' | 'top'bottomTooltip placement.
PopperComponentelementTypePopperProps applied to the Popper element.
PopperPropsobjectCallback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback.
titlenodeTooltip title. Zero-length titles string are never displayed.
TransitionComponentelementTypeGrowThe component used for the transition.
TransitionPropsobjectProps applied to the Transition element.
componentsProps{ arrow?: object, popper?: object, tooltip?: object, transition?: object }{}The extra props for the slot components. You can override the existing props or add new ones.Deprecated-use the slotProps prop instead. This prop will be removed in v7.
slotProps{ arrow?: object, popper?: object, tooltip?: object, transition?: object }{}The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future.
components{ Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType }{}The components used for each slot inside.Deprecated-use the slots prop instead. This prop will be removed in v7.
disableInteractiveboolfalseIf true, the tooltip will not be interactive, and does not close when the user hovers over the tooltip before the leaveDelay has expired.
describeChildboolfalseSet to true if the title acts as an accessible description. By default the title acts as an accessible label for the child.
followCursorboolfalseIf true, the tooltip will follow the cursor.
slots{ arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType }{}The components used for each slot inside. This prop is an alias for the components prop, which will be deprecated in the future.

Examples

Positioned InformationTooltips

<InformationToolTip
title="InformationToolTip"
placement="left"
></InformationToolTip>
<InformationToolTip title="InformationToolTip"></InformationToolTip>