Popover ​

Shows information in a portal that doesnt disturb the page layout.

Trigger Click ​

Trigger Hover ​

API Reference ​

Show types
typescript
export interface PopoverProps {
  /** Controls visibility of the popover */
  show?: boolean

  /** Event that triggers the popover */
  trigger?: 'click' | 'hover'

  /** Delay in ms before showing popover on hover */
  hoverDelay?: number

  /** Delay in ms before hiding popover on hover leave */
  leaveDelay?: number

  /** Placement of the popover relative to the target */
  placement?:
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'right-start'
    | 'right-end'
    | 'left-start'
    | 'left-end'
    | 'top'
    | 'bottom'
    | 'right'
    | 'left'
  popoverClass?: string | object | Array<string | object>

  /** Transition style to use */
  transition?: 'default' | null

  /** Whether to hide the popover when clicking outside */
  hideOnBlur?: boolean

  /** Whether the popover width should match the target element */
  matchTargetWidth?: boolean
  offset?: number
  collisionPadding?: number
}
Prop Default Type
show
undefined
boolean

Controls visibility of the popover

trigger
"click"
"click" | "hover"

Event that triggers the popover

hoverDelay
0
number

Delay in ms before showing popover on hover

leaveDelay
0.5
number

Delay in ms before hiding popover on hover leave

placement
"bottom-start"
"bottom" | "top" | "right" | "left" | "bottom-start" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"

Placement of the popover relative to the target

popoverClass
""
string | object | (string | object)[]
transition
null
"default" | null

Transition style to use

hideOnBlur
true
boolean

Whether to hide the popover when clicking outside

matchTargetWidth
—
boolean

Whether the popover width should match the target element

offset
—
number
collisionPadding
10
number
Slot Payload
target
{ togglePopover: () => void; updatePosition: () => void; open: () => void; close: () => void; isOpen

Content of the trigger/anchor element

body
{ togglePopover: () => void; updatePosition: () => void; open: () => void; close: () => void; isOpen

Main content of the popover body

body-main
{ togglePopover: () => void; updatePosition: () => void; open: () => void; close: () => void; isOpen

Inner content inside the default body container

Event Payload
open
[]

Fired when the component opens.

update:show
[value: boolean]

Fired when the show changes.

close
[]

Fired when the component closes.

PasswordProgress