---
name: Tooltip
menu: Components
---

import { Playground, PropsTable } from 'docz';

import { Box } from '~/components/Box';
import { Button } from '~/components/Button';
import { Paragraph } from '~/components/Paragraph';
import { TooltipPrimary } from '~/components/TooltipPrimary';
import { TooltipIcon } from '~/components/TooltipIcon';
import { Tooltip } from '../';

# Tooltip

<PropsTable of={Tooltip} />

## Primitive component

<Playground>
  <Box height={100}>
    <Button>
      Hover me
      <Tooltip>This is a Tooltip.</Tooltip>
    </Button>
  </Box>
</Playground>

## TooltipPrimary

<Playground>
  <Box height={100}>
    <Button>
      Hover me
      <TooltipPrimary>This is a TooltipPrimary.</TooltipPrimary>
    </Button>
  </Box>
</Playground>

## TooltipIcon

<Playground>
  <Box height={100}>
    <Paragraph>
      <span>Label of an input</span>
      <TooltipIcon>This is a TooltipIcon.</TooltipIcon>
    </Paragraph>
  </Box>
</Playground>
