npm package: @rmwc/tooltip
Description: Tooltips display informative text when users hover over, focus on, or tap an element.
Author: rmwc
Latest version: 14.3.5

# Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element.

- Module **@rmwc/tooltip**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/tooltip/styles';
  - Or include stylesheets
    - **'@material/tooltip/dist/mdc.tooltip.css'**
    - **'@rmwc/tooltip/tooltip.css'**


## Basic Usage

Wrap any component in a `Tooltip` and provide the overlay attribute. The only requirement is that is has a single React child, and that the child can accept `onMouseEnter`, `onMouseLeave`, `onFocus`, and `onClick` props. This component is not backwards compatible with the tooltip from RMWC version 8.x. For a compatible version us the `RCTooltip` component. The `RCTooltip` uses the `ReactTooltip` from 'rc-tooltip' package. This tooltip uses the standard tooltip component from Google Material for the web.

```jsx
<>
  <Tooltip overlay="Cookies">
    <IconButton icon="star_border" />
  </Tooltip>

  <Tooltip overlay="Pizza">
    <IconButton icon="favorite_border" />
  </Tooltip>

  <Tooltip overlay="Icecream">
    <IconButton icon="mood" />
  </Tooltip>
</>
```

## Rich

Default rich tooltips are shown when users hover over or focus on their anchor element and remain open on focus/hover. The tooltip will become hidden when focus/hover is removed and/or content has been clicked.

Persistent rich tooltips' visibility is toggled by clicks.

```jsx
<RichTooltip
  title="Hello"
  body="I am the content of the interactive rich tooltip"
  actions={<Button>Click me</Button>}
>
  <IconButton icon="star_border" />
</RichTooltip>
```

```jsx
<RichTooltip
  title="My title"
  link={
    <RichTooltipLink href="/" target="_blank">
      Link
    </RichTooltipLink>
  }
>
  <span role="button">With links</span>
</RichTooltip>
```

```jsx
<RichTooltip body="I am persistent" isPersistent>
  <button>Popover when I am clicked</button>
</RichTooltip>
```

## Variants

```jsx
<Tooltip
  overlay={
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'white',
        width: '5rem',
        height: '8rem',
        color: 'black',
        borderRadius: '3px',
        margin: '0 -3px'
      }}
    >
      Hello world
    </div>
  }
>
  <span role="button">Popover Window</span>
</Tooltip>
```

```jsx
<>
  <Tooltip overlay="Cookies" enterDelay={1000}>
    <Button label="Enter Delay" />
  </Tooltip>

  <Tooltip overlay="Pizza" leaveDelay={1000}>
    <Button label="Leave Delay" />
  </Tooltip>

  <Tooltip overlay="Icecream" enterDelay={1000} leaveDelay={1000}>
    <Button label="Both" />
  </Tooltip>
</>
```

```jsx
<>
  <Tooltip overlay="Align start" align="start">
    <IconButton icon="trip_origin" />
  </Tooltip>
  <Tooltip overlay="Align center" align="center">
    <IconButton icon="trip_origin" />
  </Tooltip>
  <Tooltip overlay="Align end" align="end">
    <IconButton icon="trip_origin" />
  </Tooltip>
  <Tooltip overlay="Align above" align="above">
    <IconButton icon="trip_origin" />
  </Tooltip>
  <Tooltip overlay="Align below" align="below">
    <IconButton icon="trip_origin" />
  </Tooltip>
</>
```

## Usage with RMWCProvider

The RMWCProvider allows you to specify global defaults for your tooltips.

```jsx
<RMWCProvider
  tooltip={{
    align: 'right',
    leaveDelay: 500,
    enterDelay: 0
  }}
>
  <Tooltip overlay="Hello World!">
    <Button label="With Provider" />
  </Tooltip>
</RMWCProvider>
```

## Portal

Tooltips are rendered to portal. Below is an example that verifies that Tooltip is correctly rendered in a portal, where it would otherwise have been hidden.

```jsx
<CollapsibleList
  handle={
    <SimpleListItem
      text={
        <>
          This is a list item
          <Tooltip overlay={<div>hello world</div>}>
            <Icon icon="help" />
          </Tooltip>
        </>
      }
    />
  }
/>
```

```jsx
<CollapsibleList
  handle={
    <SimpleListItem
      text={
        <>
          This is a list item
          <Tooltip
            overlay={<div>hello world</div>}
            renderToPortal={false}
          >
            <Icon icon="help" />
          </Tooltip>
        </>
      }
    />
  }
/>
```

## Tooltip
A Tooltip component for displaying informative popover information.

### Props

| Name | Type | Description |
|------|------|-------------|
| `align` | `TooltipAlignT` | How to align the tooltip. |
| `anchorBoundaryType` | `AnchorBoundaryType` | Specify whether the anchor element is bounded (element has an identifiable boundary such as a button) or unbounded (element does not have a visually declared boundary such as a text link). |
| `children` | `ReactNode` | The children that the tooltip belongs to. Must be a single React element. |
| `className` | `string` | Custom className to add to the tooltip overlay container. |
| `enterDelay` | `number` | Delay in milliseconds before showing the tooltip when interacting via touch or mouse. |
| `leaveDelay` | `number` | Delay in milliseconds before hiding the tooltip when interacting via touch or mouse. |
| `overlay` | `ReactNode` | The overlay for the tooltip. |
| `renderToPortal` | `PortalPropT` | Renders the tooltip to a portal. Defaults to true. |