Popover

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

Popover

Nuxt UI

Git

Demo

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.

<template>
  <B24Popover>
    <B24Button label="Open" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

Mode

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

TIP

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

Details

<script setup lang="ts">
import type { PopoverProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  mode?: PopoverProps['mode']
}

withDefaults(defineProps<ExampleProps>(), {
  mode: 'click' as const
})
</script>

<template>
  <B24Popover
    :mode="mode"
  >
    <B24Button label="Open" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

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.

Details

<script setup lang="ts">
export interface ExampleProps {
  openDelay?: number
  closeDelay?: number
}

withDefaults(defineProps<ExampleProps>(), {
  openDelay: 500,
  closeDelay: 300
})
</script>

<template>
  <B24Popover
    mode="hover"
    :open-delay="openDelay"
    :close-delay="closeDelay"
  >
    <B24Button label="Hover" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

Content

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

Details

<script setup lang="ts">
import { computed } from 'vue'

export interface ExampleProps {
  contentAlign?: 'start' | 'center' | 'end'
  contentSide?: 'top' | 'right' | 'bottom' | 'left'
  contentSideOffset?: number
}

const props = withDefaults(defineProps<ExampleProps>(), {
  contentAlign: 'start',
  contentSide: 'left',
  contentSideOffset: 8
})

const content = computed(() => {
  return {
    align: props.contentAlign,
    side: props.contentSide,
    sideOffset: props.contentSideOffset
  }
})
</script>

<template>
  <B24Popover
    mode="hover"
    :content="content"
  >
    <B24Button label="Hover" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

Arrow

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

Details

<template>
  <B24Popover
    mode="hover"
    arrow
  >
    <B24Button label="Hover" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>

  <B24Popover
    :arrow="{
      width: 20,
      height: 10
    }"
  >
    <B24Button label="Open" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

Examples

Control open state

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

TIP

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

Details

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24Popover
    v-model:open="open"
  >
    <B24Button label="Open" color="link" depth="dark" />

    <template #content>
      <Placeholder class="size-48 m-4 inline-flex" />
    </template>
  </B24Popover>
</template>

Disable dismissal

Set the dismissible prop to false to prevent the Popover from being closed when clicking outside of it or pressing escape. A close:prevent event will be emitted when the user tries to close it.

Details

<script setup lang="ts">
import { ref } from 'vue'
import CrossCircle70Icon from '@bitrix24/b24icons-vue/actions/CrossCircle70Icon'

const open = ref(false)
</script>

<template>
  <B24Popover
    v-model:open="open"
    arrow
    :dismissible="false"
    :b24ui="{ content: 'p-5' }"
  >
    <B24Button label="Open" color="link" depth="dark" />

    <template #content>
      <div class="flex items-center justify-between gap-4 mb-2">
        <ProseH2 class="mb-0">
          Popover non-dismissible
        </ProseH2>

        <B24Button
          color="link"
          :icon="CrossCircle70Icon"
          @click="open = false"
        />
      </div>

      <Placeholder class="size-full min-h-48" />
    </template>
  </B24Popover>
</template>

Some content

Can be used for various purposes

Details

<script setup lang="ts">
import { ref } from 'vue'
import FileUploadIcon from '@bitrix24/b24icons-vue/main/FileUploadIcon'

const open = ref(false)
</script>

<template>
  <B24Popover
    v-model:open="open"
    arrow
    :b24ui="{
      content: 'p-5 max-w-60 max-h-72 overflow-y-auto'
    }"
  >
    <B24Button label="Upload file" color="link" depth="dark" />

    <template #content>
      <div class="mb-2.5 flex flex-col gap-2.5">
        <div class="w-full flex flex-row flex-nowrap items-center justify-start gap-3">
          <div class="size-8xl rounded-xs border border-base-100 dark:border-white/20 flex flex-col items-center justify-center">
            <FileUploadIcon class="size-10 text-base-600" />
          </div>
          <div class="flex flex-col flex-nowrap gap-1">
            <div class="font-bold text-h5">
              start-ui.md
            </div>
            <div class="text-sm text-base-500 dark:text-base-600">
              650 bytes
            </div>
          </div>
        </div>
        <B24Separator />
        <div class="w-full">
          <B24Input autofocus placeholder="Add a comment" :rows="4" />
        </div>
      </div>

      <B24Separator />

      <div class="mt-2.5 flex flex-row gap-3">
        <B24Button
          rounded
          label="Send"
          color="primary"
          size="sm"
          @click="open = false"
        />
        <B24Button
          rounded
          label="Cancel"
          color="link"
          depth="dark"
          size="sm"
          @click="open = false"
        />
      </div>
    </template>
  </B24Popover>
</template>

With anchor slot

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

WARNING

This slot only works when mode is click.

Details

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <B24Popover
    v-model:open="open"
    :b24ui="{ content: 'w-(--reka-popper-anchor-width) p-4' }"
  >
    <template #anchor>
      <B24Input placeholder="Focus to open" @focus="open = true" @blur="open = false" />
    </template>

    <template #content>
      <Placeholder class="w-full aspect-square" />
    </template>
  </B24Popover>
</template>

API

Props

Prop	Default	Type
mode	"click"	"click" | "hover" The display mode of the popover.
content	{ side: 'bottom', sideOffset: 8, collisionPadding: 8 }	Omit<PopoverContentProps, "as" | "asChild" | "forceMount"> & Partial<EmitsToProps<PopoverContentImplEmits>> The content of the popover.
arrow	false	boolean | Omit<PopoverArrowProps, "as" | "asChild"> Display an arrow alongside the popover.
portal	true	string | false | true | HTMLElement Render the popover in a portal.
dismissible	true	boolean When `false`, the popover will not close when clicking outside or pressing escape.
b24ui		{ content?: ClassNameValue; arrow?: ClassNameValue; }
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.

Slots

Slot	Type
default	{ open: boolean; }
content	{}
anchor	{}

Emits

Event	Type