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