Tooltip

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

Import

import { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';

Examples

Button with tooltip

Tooltips in Text

Props (API reference)

Open in Storybook

Name

Type

Default

children
required
ReactNode

Child nodes to be rendered in the component and that will show the tooltip when they are hovered

as
HTML Tag or React Component (e.g. div, span, etc)

HTML element used to wrap the target of the tooltip

className
string

CSS class to be appended to the root element

content
string

Content of the tooltip

hideDelay
number

It sets a delay period for the tooltip

0
id
string

A unique id of the tooltip

isDisabled
false
true

Prevents showing the tooltip

false
isVisible
false
true

It controls the initial visibility of the tooltip

maxWidth
number
"-moz-initial"
"inherit"
"initial"
"revert"
"unset"
"-moz-fit-content"
"-moz-max-content"
"-moz-min-content"
"-webkit-fit-content"
"-webkit-max-content"
"-webkit-min-content"
"fit-content"
"intrinsic"
"max-content"
"min-content"
"none"
string & {}

It sets a max-width for the tooltip

360
onBlur
(evt: FocusEvent<Element, Element>) => void

Function that will be called when target gets blurred

onFocus
(evt: FocusEvent<Element, Element>) => void

Function that will be called when target gets focused

onKeyDown
(evt: KeyboardEvent) => void

Function that will be called when the user uses a keyboard key on the target

onMouseLeave
(evt: MouseEvent<Element, MouseEvent>) => void

Function that will be called when the user move the mouse out of the target

onMouseOver
(evt: MouseEvent<Element, MouseEvent>) => void

Function that will be called when the user move the mouse over of the target

placement
"auto"
"auto-start"
"auto-end"
"top"
"bottom"
"right"
"left"
"top-start"
"top-end"
"bottom-start"
"bottom-end"
"right-start"
"right-end"
"left-start"
"left-end"

It sets the "preferred" position of the tooltip

auto
targetWrapperClassName
string

Class names to be appended to the className prop of the tooltip’s target

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-tooltip
usePortal
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`

false

Content guidelines

  • 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.
<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
<TextLink>Hover me</TextLink>
</Tooltip>