Popover

Displays a popover that appears when clicking on an element.

Install

Run the following command to install the popover component:

npx acc-nuxt add Popover

Directions

Top

Bottom

Left

Top Left

Top Right

Bottom Left

Bottom Right

Top Start

Top End

Bottom Start

Bottom End

Controller and Confirm

onConfirm

onConfirm no async

onClose

disableConfirm

Do not close on confirm

The popover will not close on error by default

Behavior

Custom styles

closeWhenTriggerOffscreen

matchTriggerWidth

alignWithCursorX

disableTrigger

preserveContent

controlled

Add popover on async with default open state as true

Nested popover

Tooltip popover

Slots

The popover component provides the following slots for customization.

#trigger
The element that triggers the popover on click. This is typically a button.
#content
The main content displayed inside the popover.
#footer="{ confirm, close, isLoadingConfirm, isDisabledConfirm }"
Slot for customizing the popover footer. Receives confirm and close functions, along with loading and disabled states.
#popoverClose
Slot for customizing the close button text or content in the default footer.
#popoverConfirm
Slot for customizing the confirm button text or content in the default footer.

Props

direction:string— optional
default:bottom
The direction the popover should appear relative to the trigger. Possible values are top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.
onConfirm:function— optional
default:undefined
Callback function to be executed when the confirm AcceleratorButton is clicked.
onClose:function— optional
default:undefined
Callback function to be executed when the popover is closed.
disableConfirm:boolean— optional
default:false
Disables the confirm button.
loadingConfirm:boolean— optional
default:false
Shows a loading spinner on the confirm button.
closeOnConfirm:boolean— optional
default:true
Closes the popover when the confirm AcceleratorButton is clicked.
awaitOnConfirm:boolean— optional
default:true
Whether to await the onConfirm promise before closing the popover.
resize:boolean— optional
default:true
Whether the popover should resize when the window is resized.
closeWhenTriggerOffscreen:boolean— optional
default:false
Whether the popover should close when the trigger is scrolled offscreen.
matchTriggerWidth:boolean— optional
default:false
Whether the popover should match the width of the trigger.
alignWithCursorX:boolean— optional
default:false
Whether the popover should align with the cursor x position.
insideModal:boolean— optional
default:false
Whether the popover is rendered inside a modal.
disableTrigger:boolean— optional
default:false
Disables the trigger element.
preserveContent:boolean— optional
default:false
Whether the popover should preserve its content when closed.
gap:number— optional
default:8
The gap between the trigger and the popover.
popoverClass:string— optional
default:undefined
Custom CSS class to apply to the popover content container.

CSS Variables

The popover component can be customized using the following CSS variables.

--lev-popover-bg
default:#fff
Background color of the popover.
--lev-popover-color
default:#111827
Text color of the popover content.
--lev-popover-border
default:1px solid #d1d5db
Border style of the popover.
--lev-popover-shadow
default:0px 3px 6px rgba(0, 0, 0, 0.1)
Box shadow applied to the popover.
--lev-popover-padding
default:8px
Padding inside the popover content.
--lev-popover-border-radius
default:5px
Border radius of the popover corners.
--lev-popover-z-index
default:1200
Z-index of the popover to control stacking order.
--lev-popover-z-index-inside-modal
default:1202
Z-index of the popover when rendered inside a modal.
--lev-popover-min-width
default:200px
Minimum width of the popover.
--lev-popover-bg-dark
default:#111827
Background color of the popover in dark theme.
--lev-popover-color-dark
default:#fff
Text color of the popover content in dark theme.
--lev-popover-border-dark
default:1px solid #111827
Border style of the popover in dark theme.
--lev-popover-shadow-dark
default:0px 3px 6px rgba(0, 0, 0, 0.1)
Box shadow applied to the popover in dark theme.

On This Page