Hover me.
Usage
import { Tooltip } from '@loomhq/lens'
<Tooltip content="Hi there!" placement='topCenter'>
Hover me
</Tooltip>
Placement
Max width
Trigger offset
Keep open
When keepOpen
is true
the Tooltip will stay open when it's hovered.
Inline and block
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>
TooltipBox
Tooltip uses TooltipBox
internally, use it to build a tooltip with custom behavior.
Examples
IconButton with Tooltip
Props
Tooltip
name
type
default
placement
'topLeft'
| 'topCenter'
| 'topRight'
| 'bottomLeft'
| 'bottomCenter'
| 'bottomRight'
| 'leftTop'
| 'leftCenter'
| 'leftBottom'
| 'rightTop'
| 'rightCenter'
| 'rightBottom'
'topCenter'
triggerOffset
number
4
maxWidth
number | string | []
26
isInline
boolean
true
zIndex
number
1100
verticalAlign
string
'middle'
children
React.ReactNode
container
HTMLElement | (() => HTMLElement) | string
content
React.ReactNode
isDisabled
boolean
keepOpen
boolean
TooltipBox
name
type
default
children
React.ReactNode
maxWidth
number | string | []
onMouseEnter
React.ReactEventHandler
onMouseLeave
React.ReactEventHandler
layerProps
any
zIndex
number