k-pop

Hello World

This is the a classical Hello World example:

<template>
  <k-pop>
    <button slot="trigger">Toggle</button>
    Popover Body
  </k-pop>
</template>

The example above is not using any theme or custom styles. For this reason it looks like a bit boring. Most of the following examples are using a theme.

Close on Click Inside

This example shows you how to add a close-button inside the popover.

<template>
  <k-pop boundary="viewport" with-arrow theme="clean">
    <button slot="trigger">Show Popover</button>

    <template #default="{hide}">
      <div>I am a Popover Body.</div>
      <button @click="hide">Click here to Hide the Popover</button>
    </template>

  </k-pop>
</template>

<style lang="scss">
@import "./../../themes/clean";
</style>

Show on Hover

k-pop is very flexible: This example shows how to show the popover on mouseenter and mouseleave. The result is a very simple tooltip.

<template>
  <k-pop placement="bottom" with-arrow theme="clean">
    <template #trigger="{ show, hide }">
      <button @mouseenter="show" @mouseleave="hide">Tooltip shows hover</button>
    </template>
    Popover Body
  </k-pop>
</template>

<style lang="scss">
@import "./../../themes/clean";
</style>

Body Size Modes New

By default, k-pop does not modify the width of the popover body. This default behavior is great is most cases and, at the same time, allows you to handle it manually if so desired.

After using k-pop for some time in Fundamental Vue (a component library) it became clear that this is not convenient enough – for certain use cases.

So, if you find yourself in the situation that the default sizing behavior is not working for you read ahead.

at-least-trigger

By setting the body-size-mode-prop to at-least-trigger you tell k-pop to make the popover body at least as wide width as the trigger element/component. The example below contains two popovers + triggers. You will notice two things:

  1. Big popovers stay big: Even when attached to a small trigger the popover body is not scaled down but just keeps it size.
  2. Small popovers are made wider to match the width of the trigger.
<template>
<div style="display: flex;">
  <k-pop
    body-size-mode="at-least-trigger"
    with-arrow
    theme="clean"
  >
    <button slot="trigger">Small Trigger</button>
    <p style="padding: 20px; width: 250px;">
      I am a Popover Body.
    </p>
  </k-pop>

  <k-pop
    body-size-mode="at-least-trigger"
    with-arrow
    theme="clean"
  >
    <button style="width: 250px;" slot="trigger">Show Popover</button>
    I am a Popover Body.
  </k-pop>

  </div>
</template>

<style lang="scss">
@import "./../../themes/clean";
</style>

equal-trigger

By setting the body-size-mode-prop to equal-trigger you tell k-pop to make the popover body the same width as the trigger element/component. The popovers below have the same width as the button.

<template>
<div style="display: flex;">
  <k-pop
    body-size-mode="equal-trigger"
    with-arrow
    theme="clean"
  >
    <button slot="trigger">Small Trigger</button>
    <p style="padding: 20px; width: 250px;">
      I am a Popover Body.
    </p>
  </k-pop>

  <k-pop
    body-size-mode="equal-trigger"
    with-arrow
    theme="clean"
  >
    <button style="width: 250px;" slot="trigger">Show Popover</button>
    I am a Popover Body.
  </k-pop>

  </div>
</template>

<style lang="scss">
@import "./../../themes/clean";
</style>

Scrollable Popover Body

If you have a popover with a (potentially) large body then you might want to make it scrollable. You do that by setting custom styles on the popover's body that constraint it's size and adjust it's overflow settings.

body-styles can be used to do just that.

IMPORTANT

It is probably a good idea to also disable flipping by setting flips to false.

<template>
  <k-pop
    with-arrow theme="clean" :flips="false"
    :body-styles="{
      overflowY: 'scroll',
      maxWidth: '350px',
      maxHeight: '200px'
    }"
  >
    <button slot="trigger">Show Popover</button>
    <div><div v-for="idx in indices" :key="String(idx)">
      I am part {{idx + 1}} of a wonderful popover.
    </div></div>
  </k-pop>
</template>

<script>
export default {
  data: () => ({ indices: Array.from({ length: 35 }).map((_, idx) => idx) })
}
</script>

<style lang="scss">@import "./../../themes/clean";</style>