Popover

A Vue component that creates a customizable popover with various trigger modes and placement options.

Usage

Props

Prop	Type	Default	Description
`mode`	String	`'hover'`	Trigger mode for the popover. Can be 'click' or 'hover'.
`open`	Boolean	`undefined`	Controls the open state of the popover.
`disabled`	Boolean	`false`	Disables the popover when true.
`openDelay`	Number	`0`	Delay in milliseconds before opening the popover (for hover mode).
`closeDelay`	Number	`0`	Delay in milliseconds before closing the popover (for hover mode).
`transitionName`	String	`'popover'`	Name of the transition effect for the popover.
`placement`	String	`'bottom'`	Placement of the popover. Can be 'top', 'bottom', 'left', or 'right'.
`arrow`	Boolean	`true`	Shows an arrow on the popover when true.
`arrowClass`	String	`'bg-gray-500'`	CSS class for styling the arrow.
`offset`	Number	`8`	Offset distance of the popover from the trigger element.

Slots

Slot	Description
`trigger`	Content for the trigger element. Provides `open` and `close` properties.
`default`	Content for the popover panel. Provides `open` and `close` properties.

Events

Event	Description
`update:open`	Emitted when the open state of the popover changes.

Customization

You can customize the Popover component in several ways:

Use the mode prop to choose between hover and click triggers.
Adjust the placement prop to change the popover's position relative to the trigger.
Modify the openDelay and closeDelay props to control timing for hover mode.
Use the transitionName prop to apply custom transition effects.
Style the arrow using the arrowClass prop.
Control the distance between the trigger and popover using the offset prop.

A Vue component that creates a parallax effect on an image as the user scrolls.

Shimmer Loading

A Vue component that creates a shimmer loading effect, ideal for placeholder content.