Popover

Displays rich content in a portal, triggered by a button.

Prop	Default	Type	Description
`defaultOpen`	`false`	`boolean`	The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
`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.
`open`	`false`	`boolean`	The controlled open state of the popover.

Preview

Code

Content

Prop	Default	Type	Description
`_popoverContent`	-	`object`	The component that pops out when the popover is open.

Options	Default	Type	Description
`align`	`start`	`start`, `center`, `end`	The preferred alignment against the trigger. May change when collisions occur.
`alignOffset`	-	`number`	An offset in pixels from the start or end alignment options.
`avoidCollisions`	`false`	`boolean`	When true, overrides the side and align preferences to prevent collisions with boundary edges.
`disableOutsidePointerEvents`	`false`	`boolean`	When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.
`forceMount`	`false`	`boolean`	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`hideWhenDetached`	`false`	`boolean`	Whether to hide the content when the trigger becomes fully occluded.
`prioritizePosition`	`false`	`boolean`	Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
`side`	`top`	`top`, `right`, `bottom`, `left`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
`sideOffset`	-	`number`	The distance in pixels from the trigger.
`sticky`	`partial`	`partial`, `always`	The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
`trapFocus`	`false`	`boolean`	Whether focus should be trapped within the MenuContent
`updatePositionStrategy`	-	`always`, `optimized`	Strategy to update the position of the floating element on every animation frame.

Slots

Name	Props	Description
`trigger`	`open`	The button trigger.
`default`	-	The popover content.

Presets

shortcuts/popover.ts

type PopoverPrefix = 'popover'

export const staticPopover: Record<`${PopoverPrefix}-${string}`, string> = {
  'popover-content': 'z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
}

export const dynamicPopover: [RegExp, (params: RegExpExecArray) => string][] = [
  // dynamic preset
]

export const popover = [
  ...dynamicPopover,
  staticPopover,
]

Props

types/popover.ts

import type { PopoverContentProps, PopoverRootProps } from 'radix-vue'
import type { HTMLAttributes } from 'vue'

interface BaseExtensions { class?: HTMLAttributes['class'] }

export interface NPopoverProps extends PopoverRootProps {
  /** Props for the popover content */
  _popoverContent?: NPopoverContentProps
}

export interface NPopoverContentProps extends PopoverContentProps, BaseExtensions {
}

Components

Popover.vue

PopoverContent.vue

<script setup lang="ts">
import type { PopoverRootEmits } from 'radix-vue'
import type { NPopoverProps } from '../../../types'
import { PopoverRoot, PopoverTrigger, useForwardPropsEmits } from 'radix-vue'
import { computed } from 'vue'
import NPopoverContent from './PopoverContent.vue'

const props = defineProps<NPopoverProps>()
const emits = defineEmits<PopoverRootEmits>()

const delegatedProps = computed(() => {
  const { _popoverContent, ...delegated } = props

  return delegated
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <PopoverRoot v-slot="{ open }" v-bind="forwarded">
    <PopoverTrigger as-child>
      <slot name="trigger" :open />
    </PopoverTrigger>
    <NPopoverContent v-bind="_popoverContent">
      <slot />
    </NPopoverContent>
  </PopoverRoot>
</template>

Edit this page on GitHub

Pagination

Pagination with page navigation, next and previous links.

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

On This Page

Star on GitHub Create Issues Release Notes Become a Sponsor Edit this page on GitHub

Popover

Examples

Basic

Content

Slots

Presets

Props

Components