Hover me.

Usage

import { Tooltip } from '@loomhq/lens'
<Tooltip content="Hi there!" placement='topCenter'>
Hover me
</Tooltip>

Placement

topLeft
topCenter
topRight
bottomLeft
bottomCenter
bottomRight
leftTop
leftCenter
leftBottom
rightTop
rightCenter
rightBottom

Max width

trigger

Trigger offset

Offset from trigger 4px
Offset from trigger 32px

Keep open

When keepOpen is true the Tooltip will stay open when it's hovered.

Keep my tooltip open

Inline and block

Wrap children with display: inline-block
Wrap children with display: 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.

TooltipBox content

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'
content
React.ReactNode
keepOpen
boolean
container
HTMLElement | (() => HTMLElement) | string
children
React.ReactNode

TooltipBox

name
type
default
children
React.ReactNode
maxWidth
number | string | []
onMouseEnter
React.ReactEventHandler
onMouseLeave
React.ReactEventHandler
layerProps
any
zIndex
number