VTEX Components Tooltip

Elementary tooltip component that can be reused by all VTEX Styleguides. You can use reakit full features (except the 'as' prop) and theme-ui's sx. It renders a tooltip element by default.

This is a styled base component, so any system can theme it. To customize this component, you just need to add the tooltip variant in your theme (check the theming section).

Install

yarn add @vtex-components/tooltip

or

npm install @vtex-components/tooltip

Usage

import Tooltip from '@vtex-components/tooltip'

function UseCase() {
  return <Tooltip label="Tooltip text here"><button>Children</button></Tooltip>
}

With arrow

If you want your tooltip to have an arrow, you can pass it to the tooltip as a prop. On the following example, it's shown how you can use the Reakit Reakit TooltipArrow with the tooltip, but you can design any arrow you want. The tooltip state is passed to the arrow, so you can access the placement and visibility of the tooltip.

import Tooltip from '@vtex-components/tooltip'
import { TooltipArrow } from 'reakit'

function Arrow(props) {
  return <TooltipArrow {...props} />;
}

function TooltipExample() {
  return(
    <Tooltip label="Tooltip label" placement="top" arrow={<Arrow />}>
      <button>Children component</button>
    </Tooltip>
  )
}

🎨 Theming

| Modifier | Description | | -------- | ------------------- | | styles | base styles |

Example

You can define the theme with:

const theme = {
  tooltip: {
    backgroundColor: 'black',
    color: 'white',
    paddingY: 1,
    paddingX: 2,
  },
}

Props

| prop | type | description | default | required | | --------- | ----------- | -------------------------------------------------------- | ------- | -------- | | children | ReactNode | Element that triggers the tooltip | - | ✔️ | | label | String | Text shown in the tooltip | - | ✔️ | | arrow | ReactNode | Arrow element, if you want your tooltip to have an arrow | - | 🚫 | | placement | Placement | The placement of the tooltip relative to its children | top | 🚫 | | visible | boolean | Whether the tooltip is visible or not | - | 🚫 | | sx | SxStyleProp | Theme-ui style prop | - | 🚫 |