---
name: Tooltip
menu: Components
route: /components/tooltip
---

import { Playground, Props } from 'docz'
import Tooltip from './'
import Box from '../box/'
import Text from '../text/'
import Button from '../button/'
import Swatch from '../swatch/'

# Tooltip

Renders a tooltip near an element in response to hover, click, focus, or
programmatic control.

To use, (1) nest the Tooltip component inside the component that should trigger it,
and (2) add `data-tooltip` to the trigger component. See examples below.

Tooltip accepts a string or arbitrary JSX as children.

Components that represent singleton elements (eg, `<img>`, `<input>`) cannot use Tooltip.

Future work: Consider alternative backing libraries (currently Tooltip.js, from Popper.js).

## Component authoring

When *authoring* a component that does not render `props.children` and that might
be used with a Tooltip, you must do something like the following. See
[Brand](/components/brand), [Pill](/components/pill), [Swatch](/components/swatch)
for examples.

```
import { extractComponentFromChildren } from "../../utils";
...
const Foo = ({children, ...props}) => {
  const [ignoredChildren, tooltip] = extractComponentFromChildren(children, 'Tooltip');
  return (
    <StyledFoo {...props}>
      {tooltip}
    </StyledFoo>
  );
};
```

## Basic usage

<Playground>
    <Text my={8} py={1} bg="grayLight3" textAlign="center" data-tooltip>
        Hover here
        <Tooltip placement="right">Ahoy there!</Tooltip>
    </Text>

    <Box my={8}>
        <Button data-tooltip>
            Click me
            <Tooltip trigger="click" hasArrow bg="secondary" closeOnClickOutside>
                <Box p={2} bg="transparent" color="white">But don't click me</Box>
            </Tooltip>
        </Button>
    </Box>

    <Box my={8}>
        <Swatch color="red" size="2em" data-tooltip>
            <Tooltip hasArrow placement="bottom">Red</Tooltip>
        </Swatch>
    </Box>

</Playground>


## PropTypes

| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| show | bool | no | `undefined` | For programmatic control |
| trigger | string | no | `hover focus` | Space-separated list of events that trigger tooltip. Can be 'hover', 'click', 'focus', 'manual'. 'manual' cannot be combined with others. |
| hasArrow | bool | no | `false` | Render arrow |
| placement | string | no | `top` | 'top', 'top-start', 'top-end', 'right', 'right-start', 'right, 'bottom', 'bottom-start', 'bottom', 'left', 'left-start', 'left-end' |
| delay | number or `{show: number, hide: number}` | no | `0` | If number, applies to both show and hide |
| closeOnClickOutside | bool | no | `false` | Iff `trigger === click` |
| boundariesElement | string or Element | no | `scrollParent` | Can be 'scrollParent', 'window', 'viewport' or any DOM element. |
| xOffset | number or string | no | `0` | |
| yOffset | number or string | no | `0` | |
| options | object | no | | Gets passed to underlying [Tooltip.js library](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/tooltip-documentation.md) |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    py,
    px
  },
  colors: {
    color,
    bg
  },
  radii: {
    borderRadius
  },
  shadows: {
    boxShadow
  },
  fontSizes: {
    fontSize
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/tooltip)
- [Learn more about themeing](/blaster-theme)