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

// 
<Tooltip
  placement="top"
  id="tip1"
  targetWrapperClassName="targetWrapperClassName"
  content="Hi I am a Tooltip"
>
  <TextLink>Hover me</TextLink>
</Tooltip>
// 
<Tooltip
  placement="top"
  id="tip1"
  targetWrapperClassName="targetWrapperClassName"
  content="Hi I am a Tooltip"
>
  <TextLink>Hover me</TextLink>
</Tooltip>
Hide source

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

Props

• Name

  children(required)

  Description

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

  ReactNode
• Name

  as

  Description

  HTML element used to wrap the target of the tooltip

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

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  content

  Description

  Content of the tooltip

  string
• Name

  hideDelay

  Description

  It sets a delay period for the tooltip

  number

  Default

  0
• Name

  id

  Description

  A unique id of the tooltip

  string
• Name

  isDisabled

  Description

  Prevents showing the tooltip

  false

  true

  Default

  false
• Name

  isVisible

  Description

  It controls the initial visibility of the tooltip

  false

  true
• Name

  maxWidth

  Description

  It sets a max-width for the tooltip

  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 & {}

  Default

  360
• Name

  onBlur

  Description

  Function that will be called when target gets blurred

  (evt: FocusEvent<Element>) => void
• Name

  onFocus

  Description

  Function that will be called when target gets focused

  (evt: FocusEvent<Element>) => void
• Name

  onKeyDown

  Description

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

  (evt: KeyboardEvent) => void
• Name

  onMouseLeave

  Description

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

  (evt: MouseEvent<Element, MouseEvent>) => void
• Name

  onMouseOver

  Description

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

  (evt: MouseEvent<Element, MouseEvent>) => void
• Name

  placement

  Description

  It sets the "preferred" position of the tooltip

  "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"

  Default

  auto
• Name

  targetWrapperClassName

  Description

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

  string
• Name

  testId

  Description

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

  string

  Default

  cf-ui-tooltip
• Name

  usePortal

  Description

  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

  true

  Default

  false