Usage
import { Tooltip } from '@loomhq/lens'
<Tooltip content="Hi there!" placement='topCenter'>
Hover me
</Tooltip>
Placement
<Arrange gap="medium" columns="repeat(3, 1fr)">
{[
'topLeft',
'topCenter',
'topRight',
'bottomLeft',
'bottomCenter',
'bottomRight',
'leftTop',
'leftCenter',
'leftBottom',
'rightTop',
'rightCenter',
'rightBottom',
].map((placement, index) => (
<Tooltip content="I'm here" placement={placement} key={index}>
<Container backgroundColor="overlay" borderSide="all" padding="medium">
<Text alignment="center">{placement}</Text>
</Container>
</Tooltip>
))}
</Arrange>
Max width
<Tooltip maxWidth={40} content={demoText.medium}>
<div>trigger</div>
</Tooltip>
Trigger offset
<Arrange gap="large">
<Tooltip content='4px' triggerOffset={4}>
<div>Offset from trigger 4px</div>
</Tooltip>
<Tooltip content='32px' triggerOffset={32}>
<div>Offset from trigger 32px</div>
</Tooltip>
</Arrange>
Keep open
When keepOpen is true the Tooltip will stay open when it's hovered.
<Tooltip keepOpen content='Hover me and I will stay open'>
<div>Keep my tooltip open</div>
</Tooltip>
Disabled
When isDisabled is true the Tooltip will never show.
() => {
const [isDisabled, setDisabled] = React.useState(true)
return (
<>
<Tooltip isDisabled={isDisabled} content='Tooltip is enabled'>
<div>{isDisabled ? 'Disabled' : 'Enabled'} tooltip</div>
</Tooltip>
<div>
<Button onClick={() => setDisabled(s => !s)} variant="primary">
{isDisabled ? 'Enable' : 'Disable'}
</Button>
</div>
</>
)}
Inline and block
<>
<Tooltip isInline content='Content'>
<Container borderSide="all" borderColor="red">Wrap children with display: inline-block</Container>
</Tooltip>
<Tooltip isInline={false} content='Content'>
<Container borderSide="all" borderColor="red">Wrap children with display: block</Container>
</Tooltip>
</>
Delay
Sets a delay on when to show the tooltip
<Arrange gap="medium">
<Tooltip content='Content'>
<Container backgroundColor="overlay" borderSide="all" padding="medium">
<Text alignment="center">Immediate (default)</Text>
</Container>
</Tooltip>
<Tooltip content='Content' delay="long">
<Container backgroundColor="overlay" borderSide="all" padding="medium">
<Text alignment="center">Long Delay (800ms)</Text>
</Container>
</Tooltip>
</Arrange>
Container
Specify where it's going to be rendered in the DOM, this is especially useful when working with Shadow DOM.
<Tooltip content="Content" container={() => document.querySelector("#renderContainer")}>
Trigger
</Tooltip>
Tooltip uses TooltipBox internally, use it to build a tooltip with custom behavior.
<TooltipBox maxWidth={30}>
TooltipBox content
</TooltipBox>
Examples
<>
<Tooltip content='Delete'>
<IconButton icon={<SvgTrash />} altText="Trash"/>
</Tooltip>
<Tooltip content='Add'>
<IconButton icon={<SvgAdd />} altText="Add"/>
</Tooltip>
<Tooltip content='Close'>
<IconButton icon={<SvgClose />} altText="Close"/>
</Tooltip>
</>
Props
placement
'topLeft'
| 'topCenter'
| 'topRight'
| 'bottomLeft'
| 'bottomCenter'
| 'bottomRight'
| 'leftTop'
| 'leftCenter'
| 'leftBottom'
| 'rightTop'
| 'rightCenter'
| 'rightBottom'
'topCenter'
maxWidth
number | string | []
26
verticalAlign
string
'middle'
delay
'immediate' | 'long'
'immediate'
container
HTMLElement | (() => HTMLElement) | string
maxWidth
number | string | []
onMouseEnter
React.ReactEventHandler
onMouseLeave
React.ReactEventHandler