Popover

KPop is a popover component that comes in handy when you need to display more content than can fit in a tooltip.

Communications settings

Receive marketing communications

Receive important updates

<KPop
  button-text="Open popover"
  title="Communications settings"
  width="350"
>
  <template #content>
    <KInputSwitch label="Receive marketing communications" />
    <KInputSwitch label="Receive important updates" />
  </template>
  <template #footer>
    <KButton>Apply</KButton>
  </template>
</KPop>

NOTE

Check out KTooltip if you're looking for a component for showing tooltips. KPop is ideal for displaying more complex popover dialogs that might need to have interactive elements.

Props

buttonText

Popover trigger button text. If you want to use your custom element as a popover trigger, check out the default slot.

Popover content.

<KPop button-text="Open popover">
  <template #content>
    Popover content.
  </template>
</KPop>

title

Popover container title. Can also be slotted.

Popover title

Popover content.

<KPop
  title="Popover title"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

placement

Placement of the popover.

Accepted values are:

• auto (default)
• top
• topStart
• topEnd
• left
• leftStart
• leftEnd
• right
• rightStart
• rightEnd
• bottom
• bottomStart
• bottomEnd

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

Popover content.

<KPop
  placement="bottomEnd"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

trigger

Whether popover should be opened on trigger element click or mouseover.

Accepted values are:

• click (default)
• hover

Popover content.

<KPop
  trigger="hover"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

popoverTimeout

When trigger prop is hover, you can provide a timeout for popover to wait before it closes. Default value is 300 milliseconds.

Popover content.

<KPop
  :popover-timeout="3000"
  trigger="hover"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

disabled

Boolean to control whether popover should be disabled. Defaults to false.

Popover content.

<KPop
  disabled
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

hideCaret

Boolean to control whether the popover caret should be visible. Defaults to false.

Popover content.

<KPop
  hide-caret
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

closeOnPopoverClick

Boolean to control whether or not the popover should close when a user clicks within the popover content. Default to false.

Close on popover click

<KPop
  close-on-popover-click
  button-text="Open popover"
>
  <template #content>
    <KButton size="small">
      Click here
    </KButton>
  </template>
</KPop>

positionFixed

A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries. Defaults to true.

Popover content.

Popover content.

<KPop
  :position-fixed="false"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

hideCloseIcon

Boolean to hide close button in popover content.

Hide close icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<KPop
  hide-close-icon
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

width

Width of the popover container. Default value is 200px.

Popover content.

<KPop
  width="500"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

maxWidth

Maximum width of the popover container. Default value is auto.

Popover content.

<KPop
  max-width="120"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

target

This is the target element selector that the popover is appended to. By default its the KPop wrapper element.

Example: #my-element-id

tag

KPop wrapper element type. Default value is div.

popoverClasses

List of class names you want to assign to .k-popover element.

<KPop
  popover-classes="foo bar"
  button-text="Open popover"
>
  <template #content>
    Popover content.
  </template>
</KPop>

hidePopover

Optional boolean flag to hide the popover. Useful for external events. Default value is false.

zIndex

Pass a number to use for the z-index property. Default value is 1000.

Slots

content

Slot for passing popover content.

Popover content.

<KPop button-text="Open popover">
  <template #content>
    Popover content.
  </template>
</KPop>

default

Slot for passing custom popover trigger element.

NOTE

When providing your custom element as popover trigger, make sure to set appropriate tabindex attribute in order to make popover accessible for assistive technology users.

Password

Must contain at least one special character: *!&#.

<KPop
  width="auto"
  hide-close-icon
>
  <KInput
    label="Password"
    type="password"
    placeholder="Enter a strong password"
  />
  <template #content>
    Must contain at least one special character: *!&#.
  </template>
</KPop>

title

Slot for passing custom popover title.

Popover title

Popover content.

<KPop button-text="Open popover">
  <template #title>
    Popover title
  </template>
  <template #content>
    Popover content.
  </template>
</KPop>

footer

Slot for passing footer content that goes directly underneath main popover content.

Popover content.

Footer

<KPop button-text="Open popover">
  <template #content>
    Popover content.
  </template>
  <template #footer>
    <KBadge>Footer</KBadge>
  </template>
</KPop>

Events

open

Fires when the popover is opened.

close

Fires when the popover is closed.

popover-click

Fires when the popover content is clicked.