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.

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

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

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

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

Variants

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

<>
  <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>
</>

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

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

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

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