vue-popper-lite

A popover component based on popper-lite for Vue 3 support typescript

Example

Using Vue Popper Lite from Vue SFC

Vue SFC Playground

Using Vue Popper Lite from CDN

Vue from CDN

Install

NPM

npm install vue-popper-lite

Yarn

yarn add vue-popper-lite

PNPM

pnpm add vue-popper-lite

CDN

Recommended: https://unpkg.com/vue-popper-lite, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popper-lite/

Usage

Vue environment

<!-- If your content is only a simple string, you can use the content prop -->
<template>
  <v-popper content="This is the Popper content">
    <button slot="reference">
      Reference Element
    </button>
  </v-popper>
</template>

<!-- If your content is more complex, you can use the content slot -->
<template>
  <v-popper>
    <div>This is the Popper content</div>
    <template #reference>
        <button>Trigger element</button>
    </template>
  </v-popper>
</template>

<script>
  import { defineComponent } from "vue";
  import { Popper } from "vue-popper-lite";
  import "vue-popper-lite/style.css";

  export default defineComponent({
    components: {
      'VPopper': Popper,
    },
  });
</script>

Props

Name	Type	Default	Description
trigger	String	hover	Optional value: hover - hover to open popper content clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it clickToToggle - click on the popper toggles it's visibility
placement	String	bottom	Preferred placement of the Popper
delay-on-mouse-over	Number	10	Delay in ms before showing popper during a mouse over
delay-on-mouse-out	Number	10	Delay in ms before hiding popper during a mouse out
disabled	Boolean	false	Disables the Popper. If it was already open, it will be closed.
content	String	null	If your content is just a simple string, you can pass it as a prop
transition	String	empty	Custom transition class
enter-active-class	String	null	Custom transition class enter
leave-active-class	String	null	Custom transition class leave
force-show	Boolean	false	Force show popper
append-to-body	Boolean	false	Append content to body
visible-arrow	Boolean	true	Visible an arrow on the Popper
arrow-padding	Number	0	Stop arrow from reaching the edge of the Popper (in pixels)
enable-flip	Boolean	true	Popper into place, it will not flip dynamically when it runs out of space if this is set to false
offset-kidding	Number	0	Offset in pixels along the trigger element
offset-distance	Number	8	Offset in pixels away from the trigger element
stop-propagation	Boolean	false	Stop propagation event click
prevent-default	Boolean	false	Prevent default event click
strategy	String	absolute	Describes the positioning strategy to use. If your reference element is in a fixed container, use the fixed strategy
content-class	String	empty	Class name for content element

Events

Name	Description
created	Created popper component
show	Show popover
hide	Hide popover
document-click

Slots

Name	Description
default	For the Popper content
reference	For Trigger the Popper

CSS variables

Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

CSS variable	Example value
--popper-background	#333333
--popper-color	#ffffff
--popper-padding	8px
--popper-radius	4px
--popper-arrow-width	8px
--popper-arrow-height	8px

Development Setup

# install dependencies
pnpm install

# build dist files
pnpm build

# build dist files and types
pnpm prepublishOnly