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

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
required
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
content
node
keepOpen
bool

TooltipBox

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