ACV Popover

A pop-up element that can contain text, links, form elements, and any other content. Do not confuse popover and tooltip components. Popover is called by clicking, and it can contain any content, and tooltip is called by hover or focus state and contains only text. You can close the popover by clicking on the primary or secondary button, using the Esc key or clicking outside the component.

Basic usage

TIP

Sometimes designer will have style requirement for the trigger element when popover is visible. It can be easily triggered by show/hide event of Popover. Please confirm with designer for the style requirement.

Source code

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import AcvPopover from '@/components/popover/popover.vue';
</script>

<template>
  <AcvPopover
    placement="right"
  >
    <template #reference>
      <AcvButton>Click me</AcvButton>
    </template>
    <div class="test-popover">
      Floating content
    </div>
  </AcvPopover>
</template>

<style scoped>
.test-popover {
  /* background-color: hsl(292deg, 100%, 50%); */
  padding: 8px;
  color: var(--acv-color-black);
}
</style>

Placement

TIP

Replace the content attribute with a default slot.

Top start

Top end

Bottom start

Bottom end

Left start

Left end

Right start

Right end

Visible on first load

Loading

Content

Default

Reference

Trigger

Width

Popover with Tooltip

You can use both a popover and a tooltip on the same element. However, it is advisable to disable the tooltip whenever the popover is opened. Achieve this by using the element's click event (to disable tooltip) & popover's hide event (to enable tooltip).

Hide Tooltip when popover is open (Button)

Hide Tooltip when popover is open (Icon)

Popover with Dialog

You can use both a popover and a dialog on the same element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi

Minimal Height

Popover with dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit and do it. Autem commodi deleniti dolorem dolorum eligendi

Minimal Height

Popover with dialog

Popover with action which change height of it

Related components

• Tooltip
• Popper

Props

Prop name	Description	Type	Values	Default
popperClass		string	-
flip	Changes the placement of the floating element to keep it in view. Floating UI	boolean	-	false
arrow	Whether to show the arrow	boolean	-	false
offset	Offset of the Popper Floating UI	number	-	32
middleware	Whether to use transform for positioning Floating UI	Middleware	-
strategy	Strategy of the appearance of the Popper	"absolute" | "fixed"	-
placement	Placement of the Popper Floating UI	PopperPlacement	-	'bottom-start'
disabled	Whether the Popper is disabled	boolean	-	false
teleport	Whether the Popper is teleported	boolean	-	false
transition	Transition to add while showing/hiding Popper	AcvPopperTransitions	-	'fade'
hideDelay	Delay before hiding Popper	number	-	0
delay	Delay before showing Popper in milliseconds	number	-	0
trigger	Trigger event to open the Popper	"click" | "hover"	'click', 'hover'	'click'
persist	Persistence of Popper when clicked outside of reference element	boolean | "content"	-	false
modelValue	Show/Hide Popper base on v-model value	boolean	-	undefined
referenceEl	Reference element for the Popper By default, it is the parent element or default slot element	HTMLElement | null | undefined	-
block		boolean	-
contentClass		string	-
loading	Whether the popover is loading	boolean	-
keepAlive		boolean	-
color		string	-
width	The width of the popover	number | string	-	'150'

Events

Event name	Properties	Description
update:modelValue	eventName string - The name of the event value boolean - The visibility state of the component	Triggered when the component is toggled
hide	eventName string - The name of the event	Triggered when the component is hidden
show	eventName string - The name of the event	Triggered when the component is shown

Slots

Name	Description	Bindings
reference	HTML element with the popover trigger
default	The default slot for floating content
actions	HTML element with the popover actions