@rmwc/tooltip

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.

Changelog

14.3.5 (2024-10-24)

🩹 Fixes

• List: improve documentation's rendering of prop table (df0d6fcb)
• select: get display value (33a9d667)

❤️ Thank You

• Emilie
• Matt @mgr34