@pmwcs/tooltip
v1.1.0
Published
Tooltips display informative text when users hover over, focus on, or tap an element.
Downloads
6
Maintainers
Readme
Tooltips (PMWCS Addon)
Tooltips display informative text when users hover over, focus on, or tap an element.
- Module @pmwcs/tooltip
- Import styles:
- Using CSS Loader
- import '@pmwcs/tooltip/styles';
- Or include stylesheets
- '@pmwcs/tooltip/tooltip.css'
- Using CSS Loader
Basic Usage
Wrap any component in a Tooltip
and provide the content attribute. The only requirement is that is has a single React child, and that the child can accept onMouseEnter
, onMouseLeave
, onFocus
, and onClick
props.
<>
<Tooltip content="Cookies">
<IconButton icon="star_border" />
</Tooltip>
<Tooltip content="Pizza">
<IconButton icon="favorite_border" />
</Tooltip>
<Tooltip content="Icecream">
<IconButton icon="mood" />
</Tooltip>
</>
Variants
<Tooltip content="Cake" showArrow>
<IconButton icon="cake" />
</Tooltip>
<Tooltip content="Hello" align="right" open={true}>
<IconButton icon="mood" />
</Tooltip>
<Tooltip
content={
<div style={{ display: 'flex' }}>
<Avatar
src="images/avatars/captainamerica.png"
size="large"
name="Steve Rogers"
/>
<div style={{ marginLeft: '0.5rem' }}>
<b>Captain America</b>
<div>Steve Rogers</div>
</div>
</div>
}
>
<span role="button">S. Rogers</span>
</Tooltip>
<Tooltip
/** You make something like a popover window by just styling your inner content. */
content={
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'white',
width: '20rem',
height: '8rem',
color: 'black',
borderRadius: '3px',
margin: '0 -3px'
}}
>
Hello World!
</div>
}
>
<span role="button">Popover Window</span>
</Tooltip>
<>
<Tooltip content="Cookies" enterDelay={1000}>
<Button label="Enter Delay" />
</Tooltip>
<Tooltip content="Pizza" leaveDelay={1000}>
<Button label="Leave Delay" />
</Tooltip>
<Tooltip content="Icecream" enterDelay={1000} leaveDelay={1000}>
<Button label="Both" />
</Tooltip>
</>
function AlignmentExample() {
return [
'left',
'right',
'top',
'bottom',
'topLeft',
'topRight',
'bottomLeft',
'bottomRight'
].map(align => (
<Tooltip key={align} content={`Align: ${align}`} align={align}>
<IconButton icon="trip_origin" />
</Tooltip>
));
}
Activation
By default, tooltips will activate on hover and focus. You can change this behavior by passing one or more options to the activateOn
prop.
<>
<Tooltip content="Cookies" activateOn="hover">
<Button label="Hover" />
</Tooltip>
''
<Tooltip content="Pizza" activateOn="click">
<Button label="Click" />
</Tooltip>
<Tooltip content="Icecream" activateOn="focus">
<Button label="Focus" />
</Tooltip>
<Tooltip content="Cake" activateOn={['hover', 'focus']}>
<Button label="Multiple" />
</Tooltip>
</>
Usage with PMWCSProvider
The PMWCSProvider allows you to specify global defaults for your tooltips.
<PMWCSProvider
tooltip={{
align: 'right',
activateOn: 'hover',
showArrow: true,
leaveDelay: 500,
enterDelay: 0
}}
>
<Tooltip content="Hello World!">
<Button label="With Provider" />
</Tooltip>
</PMWCSProvider>
Tooltip
A Tooltip component for displaying informative popover information.
Props
| Name | Type | Description |
|------|------|-------------|
| activateOn
| TooltipActivationT \| TooltipActivationT[]
| Activate the tooltip through one or more interactions. Defaults to ['hover', 'focus']
. |
| align
| TooltipAlignT
| How to align the tooltip. Defaults to top
. |
| children
| React.ReactChild
| The children that the tooltip belongs to. Must be a single React.child. |
| className
| undefined \| string
| Custom className to add to the tooltip overlay container. |
| content
| React.ReactNode
| The overlay content for the tooltip. |
| enterDelay
| undefined \| number
| Delay in milliseconds before showing the tooltip when interacting via touch or mouse. |
| leaveDelay
| undefined \| number
| Delay in milliseconds before hiding the tooltip when interacting via touch or mouse. |
| open
| undefined \| false \| true
| Manually control the open state |
| showArrow
| undefined \| false \| true
| Whether or not to show an arrow on the Tooltip. Defaults to false
. |