Popover ​

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

Trigger Click ​

vue
<script setup lang="ts">
import { Button, Popover } from 'frappe-ui'
</script>

<template>
  <Popover>
    <template #target="{ togglePopover }">
      <Button @click="togglePopover()">Click me</Button>
    </template>
    <template #body-main>
      <div class="p-2 text-ink-gray-9">Popover content</div>
    </template>
  </Popover>
</template>

Trigger Hover ​

vue
<script setup lang="ts">
import { Button, Popover } from 'frappe-ui'
</script>

<template>
  <Popover trigger="hover" :hover-delay="0.5">
    <template #target>
      <Button>Hover me</Button>
    </template>
    <template #body-main>
      <div class="p-2 text-ink-gray-9">Popover content</div>
    </template>
  </Popover>
</template>

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
}
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" | "top-start" | "top-end" | "bottom-start" | "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
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

open
[]

Fired when the component opens.

update:show
[value: boolean]

Fired when the show changes.

close
[]

Fired when the component closes.

PasswordProgress