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 AcvPopover from '@/components/popover/popover.vue';
import AcvButton from '@/components/button/button.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.
Visible on first load
Loading
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).
Popover with Dialog
You can use both a popover and a dialog on the same element.