Tooltips display informative text when users hover over, focus on, or tap an element.
npm install @rmwc/tooltipTooltips 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'
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
<>
`
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`
body="I am the content of the interactive rich tooltip"
actions={}
>
`jsx`
link={
Link
}
>
With links
`jsx`
`jsx
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'white',
width: '5rem',
height: '8rem',
color: 'black',
borderRadius: '3px',
margin: '0 -3px'
}}
>
Hello world
jsx
<>
`jsx
<>
`Usage with RMWCProvider
The RMWCProvider allows you to specify global defaults for your tooltips.
jsx
align: 'right',
leaveDelay: 500,
enterDelay: 0
}}
>
`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
<>
This is a list item
hello world jsx
<>
This is a list item
renderToPortal={false}
>
}
/>
}
/>
`Tooltip
A Tooltip component for displaying informative popover information.$3
| Name | Type | Description |
|------|------|-------------|
|
| 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. |