Popover

A non-modal popup window for showing messages or gathering user input.

Usage

Use a Button or any other component in the default slot of the Popover.

Then, use the #content slot to add the content displayed when the Popover is open.

{
  "wait": "Loading client-side content..."
}

Mode

Use the mode prop to change the mode of the Popover. Defaults to click.

mode

{
  "wait": "Loading client-side content..."
}

When using the hover mode, the Reka UI HoverCard component is used instead of the Popover.

Delay

When using the hover mode, you can use the open-delay and close-delay props to control the delay before the Popover is opened or closed.

openDelay

closeDelay

{
  "wait": "Loading client-side content..."
}

Content

Use the content prop to control how the Popover content is rendered, like its align or side for example.

content.align

content.side

content.sideOffset

{
  "wait": "Loading client-side content..."
}

Arrow

Use the arrow prop to display an arrow on the Popover.

{
  "wait": "Loading client-side content..."
}

Use the modal prop to control whether the Popover blocks interaction with outside content. Defaults to false.

modal

{
  "wait": "Loading client-side content..."
}

Dismissible

Use the dismissible prop to control whether the Popover is dismissible when clicking outside of it or pressing escape. Defaults to true.

A close:prevent event will be emitted when the user tries to close it.

{
  "wait": "Loading client-side content..."
}

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

{
  "wait": "Loading client-side content..."
}

In this example, leveraging defineShortcuts, you can toggle the Popover by pressing O.

With command palette

You can use a CommandPalette component inside the Popover's content.

{
  "wait": "Loading client-side content..."
}

With following cursor

You can make the Popover follow the cursor when hovering over an element using the reference prop:

Hover me

{
  "wait": "Loading client-side content..."
}

With anchor slot

You can use the #anchor slot to position the Popover against a custom element.

This slot only works when mode is click.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`mode`	`'click'`	`"click" \| "hover"` The display mode of the popover.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }`	`PopoverContentProps & Partial<EmitsToProps<PopoverContentImplEmits>>` The content of the popover.
`arrow`	`false`	`boolean \| PopoverArrowProps` Display an arrow alongside the popover.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the popover in a portal.
`reference`		`Element \| VirtualElement` The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
`dismissible`	`true`	`boolean` When `false`, the popover will not close when clicking outside or pressing escape.
`defaultOpen`		`boolean` The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the popover.
`modal`	`false`	`boolean` The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
`openDelay`	`0`	`number` The duration from when the mouse enters the trigger until the hover card opens.
`closeDelay`	`0`	`number` The duration from when the mouse leaves the trigger or content until the hover card closes.
`b24ui`		`{ content?: ClassNameValue; arrow?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{ open: boolean; }`
`content`	`{ close: () => void; }`
`anchor`	`{ close: () => void; }`

The close function is only available when mode is set to click because Reka UI exposes this for Popover but not for HoverCard.

Emits

Event	Type
`close:prevent`	`[]`
`update:open`	`[value: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    popover: {
      slots: {
        content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
        arrow: 'fill-(--popup-window-background-color)'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        popover: {
          slots: {
            content: 'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
            arrow: 'fill-(--popup-window-background-color)'
          }
        }
      }
    })
  ]
})

Modal

A popup window for showing messages or gathering user input.

Slideover

A dialog that slides in from any side of the screen.