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

prop
type
default
placement
oneOf: "topLeft", "topCenter", "topRight", "bottomLeft", "bottomCenter", "bottomRight", "leftTop", "leftCenter", "leftBottom", "rightTop", "rightCenter", "rightBottom"
'topCenter'
triggerOffset
number
4
maxWidth
oneOfType
number
string
array
26
isInline
bool
true
zIndex
number
1100
content
node
keepOpen
bool
container
any

TooltipBox

prop
type
default
children
node
maxWidth
oneOfType
number
string
array
onMouseEnter
func
onMouseLeave
func
layerProps
object