This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

Tooltip

Tooltip

Tooltips are very useful to communicate extra information related to an element on the screen. The information should be contextual, useful, and nonessential.

How to use Tooltip

  • Even though it's possible to pass any ReactNode as a content of the Tooltip, we do not recommend passing very complex components try to use only Phrasing content

Code examples

Content recommendations

  • Use short and clear messages as the Tooltip’s content

Accessibility

  • Do not put essential information in Tooltip component
  • Add unique id property to the tooltip, so appropriate a11y attributes could be used.

Props

NameRequiredDefaultTypeDescription
contentstringContent of the tooltip
hideDelay0numberIt sets a delay period for the tooltip
idstringA unique id of the tooltip
isDisabledfalse
false
true
Prevents showing the tooltip
isVisible
false
true
It controls the initial visibility of the tooltip
maxWidth360number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | ... 6 more ... | (string & {})It sets a max-width for the tooltip
onBlur(evt: FocusEvent<Element>) => voidFunction that will be called when target gets blurred
onFocus(evt: FocusEvent<Element>) => voidFunction that will be called when target gets focused
onKeyDown(evt: KeyboardEvent) => voidFunction that will be called when the user uses a keyboard key on the target
onMouseLeave(evt: MouseEvent<Element, MouseEvent>) => voidFunction that will be called when the user move the mouse out of the target
onMouseOver(evt: MouseEvent<Element, MouseEvent>) => voidFunction that will be called when the user move the mouse over of the target
placementautoPlacementIt sets the "preferred" position of the tooltip
targetWrapperClassNamestringClass names to be appended to the className prop of the tooltip’s target
usePortalfalse
false
true
Boolean to control whether or not to render the tooltip in a React Portal. Rendering content inside a Portal allows the tooltip to escape the bounds of its parent while still being positioned correctly. Using a Portal is necessary if an ancestor of the tooltip hides overflow. Defaults to `false`
childrenrequiredReactNodeChild nodes to be rendered in the component and that will show the tooltip when they are hovered
asHTML Tag or React Component, e.g. div, span, etc.HTML element used to wrap the target of the tooltip
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-tooltipstringA [data-test-id] attribute used for testing purposes