Tooltip

Tooltips are a small informative pop-ups that appear when an item is being hovered, focused or touched. It implements WAI-ARIA Tooltip Pattern.

Examples

String label

You can pass a string to the label property.

<Tooltip label="Tooltip Label" placement="right">
  <Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>

Component Label

You can also pass a custom component to the label property.

<Tooltip
  label={
    <Stack>
      <Text variant="small" tone="info">
        Previous Order: 102183 (211-213)
      </Text>
      <Tag palette="green" label="Ready for Handling" size="small" />
      <Text variant="small">João da Silva</Text>
      <Text variant="small">49,00 BRL</Text>
    </Stack>
  }
>
  <Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>

Initially visible

You can use the visible property to set the initial visibility of the tooltip.

<Tooltip label="Tooltip Label" visible placement="right">
  <Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>

Placement

You can use the placement property to change the position that the Tooltip popup will appears.

<Tooltip label="Tooltip Label" placement="right">
  <Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>

Custom Component

When using the Tooltip with a custom component, you must provide a ref for the Popup to work. You can easily do this using the React.forwardRef.

import React, { Ref, forwardRef } from '@vtex/admin-ui'
import { Tooltip } from '@vtex/admin-ui'

const CustomIcon = forwardRef((props, ref: Ref<SVGSVGElement>) => {
  return (
    <svg {...props} ref={ref}>
      ...
    </svg>
  )
})

function Example() {
  return (
    <Tooltip label="Tooltip Label" placement="right">
      <CustomIcon />
    </Tooltip>
  )
}

Usage

import { Tooltip } from '@vtex/admin-ui'

function Example() {
  return (
    <Tooltip label="Tooltip Label" placement="right">
      <Button icon={<IconCopySimple />} aria-label="Example button" />
    </Tooltip>
  )
}

Accessibility

• Tooltip has role="tooltip".
• Tooltip's children has aria-describedby referring to the Tooltip.
• Esc hides the current visible tooltip.

Props

It also accepts all props of div JSX element.

Name	Type	Description	Required	Default
children	ReactNode	The element that triggers the tooltip	✅	-
label	ReactNode	Label shown inside the tooltip	✅	-
placement	auto-start, auto, auto-end, top-start, top, top-end, right-start, bottom, or left	The placement of the tooltip relative to its children	🚫	top
visible	boolean	Whether the tooltip is visible or not	🚫	false
fixed	boolean	Whether the tooltip popover should have position set to fixed or not	🚫	false
baseId	string	Tooltip baseId	🚫	-
csx	StyleProps	Custom styles	🚫	{}

Do’s

1. Use tooltips when you want to add a label to an specific icon.
2. Use tooltips when you want to add an informative text in situations where more clarification may be needed.
3. Don't use long texts in tooltips, a reasonable character limit is 220.
4. The position where the tooltip appears can be set and its fallback position too. By default the tooltip appears at the top and follows clockwise.
5. Prefere using hovers for tooltips to appear, instead of triggering them with clicks.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• Examples
  • String label
  • Component Label
  • Initially visible
  • Placement
  • Custom Component