Feedback

Tooltip

A tooltip is a floating label that provides brief additional information about an interface component.

View source

Props

NameTypeDefaultDescription
titlerequiredReactNode
The text displayed inside the tooltip
animationany
childrenReactNode
classNamestring
Additionnal CSS class the tooltip should have
containerstring
defaultOverlayShownboolean
delaynumber
delayHidenumber
delayShownumber
footerstring
Add a footer to the tooltip
noSpanWrapperboolean
By default, <Tooltip /> wraps children inside a span element to make sure the tooltip is applied on one html element only. Use noSpanWrapper to avoid wrapping your children inside a span. CAUTION: Make sure you have only 1 child if you use this prop.
onClick(...args: any[]) => void
onEnter(...args: any[]) => void
onEntered(...args: any[]) => void
onEntering(...args: any[]) => void
onExit(...args: any[]) => void
onExited(...args: any[]) => void
onExiting(...args: any[]) => void
placementstring
The position of the tooltip should have - Use the TooltipPlacement enum from TooltipUtils
rootCloseboolean
triggerstring | string[]
arrowOffsetLeftdeprecatedReactText
Do not use
arrowOffsetTopdeprecatedReactText
Do not use
bsStyledeprecatedstring
Do not use
positionLeftdeprecatednumber
Do not use
positionTopdeprecatednumber
Do not use

Do

  • The text must be direct and to the point, ideally a max of 3 lines. Link to external documentation when detailed explanations are required.
  • Tooltips must appear in empty areas of the screen, or on top of less relevant information.
  • Only show one Tooltip at a time.

Do Not

  • Use tooltips to display required information. Pertinent information must be presented in the regular text.
  • Add tooltips that display the same text as what can already be read in the interface (e.g., a tooltip with "Print" is not necessary on a button with the label “Print”).
  • Use tooltips for information regarding errors or warnings. Displaying this information is too important to depend on hovering.
Edit guidelines