Trigger
Popover

Usage

import { Popover } from '@loomhq/lens'

<Popover
  isOpen
  placement="rightCenter"
  content={(<div>Popover</div>)}
>
  Content
</Popover>

Placement

Offset

Open

Open on click

Open on hover

Transition

Use transitionDuration and transitionDelay to animate the opening transition.

Root id

Use rootId to insert the Popover in a custom container.

Boundary element

Use boundaryElement to limit Popover's horizontal overflow.

Examples

With popover card

Props

name
type
default
offset
number
0.5
boundaryOffset
number
0.5
zIndex
number | string
500
placement
| 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'leftTop' | 'leftCenter' | 'leftBottom' | 'rightTop' | 'rightCenter' | 'rightBottom'
'topCenter'
boundaryElement
'body' | Element
'body'
transitionDuration
number
0
transitionDelay
number
0
children
React.ReactNode
content
React.ReactNode
isOpen
boolean
rootId
string