# @rmwc/tooltip

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

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/tooltip
pnpm add @rmwc/tooltip
yarn add @rmwc/tooltip
bun add @rmwc/tooltip
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2019-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1656 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/tooltip
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/tooltip
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/tooltip

## Dependencies (3)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/provider](https://npm.io/package/@rmwc/provider.md) 14.3.5
- [@material/tooltip](https://npm.io/package/@material/tooltip.md) ^14.0.0

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 72 more at https://npm.io/package/@rmwc/tooltip/versions

## README

# 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. |

---
_Source: https://npm.io/package/@rmwc/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._