Skip to content

KPopover ​

The floating card popped by clicking or hovering.

Install ​

bash
pnpm add @ikun-ui/popover
bash
yarn add @ikun-ui/popover
bash
npm install @ikun-ui/popover

Basic usage ​

Different placement ​

Specify different display positions through the placement attribute

Different triggers ​

Specify different trigger methods through the trigger attribute

Popover Props ​

NameTypeDefaultDescription
placement'top' / 'left' / 'right' / 'bottom'topWhere the popover appears
trigger'manual' / 'click' / 'hover'hoverHow popovers are triggered
disabledbooleanfalseDisabled the popover
mouseEnterDelaynumber100Delay in seconds, before popover is shown on mouse enter, unit ms
mouseLeaveDelaynumber100Delay in seconds, before popover is shown on mouse enter, unit ms
defaultOpenboolean-Open popover by default
arrowbooleantrueDisplay the arrow
clsstring-Additional class
attrsRecord<string, string>{}Additional attributes

Popover Events ​

NameDescriptionType
changeTriggered when the popover display status changes(value: CustomEvent)=> void

Popover Slots ​

NameDescription
triggerElTrigger element for popover
contentElContent of popover

MIT Licensed