A Vue.js popover component based on PopperJS

Overview

vue3-popper

A popover component for Vue 3

Documentation

Check out the documentation

Install

NPM

npm install vue3-popper

Yarn

yarn add vue3-popper

Usage

Vue environment

">

<template>
  <Popper content="This is the Popper content">
    <button>Trigger elementbutton>
  Popper>
template>


<template>
  <Popper>
    <button>Trigger elementbutton>
    <template #content>
      <div>This is the Popper contentdiv>
    template>
  Popper>
template>

<script>
  import { defineComponent } from "vue";
  import Popper from "vue3-popper";

  export default defineComponent({
    components: {
      Popper,
    },
  });
script>

Props

Name Default Description
placement bottom Preferred placement of the Popper
disableClickAway false Disables automatically closing the Popper when the user clicks away from it
offsetSkid 0 Offset in pixels along the trigger element
offsetDistance 12 Offset in pixels away from the trigger element
hover false Trigger the Popper on hover
arrow false Display an arrow on the Popper
arrowPadding 0 Stop arrow from reaching the edge of the Popper (in pixels)
disabled false Disables the Popper. If it was already open, it will be closed.
openDelay 0 Open the Popper after a delay (ms)
closeDelay 0 Close the Popper after a delay (ms)
interactive true If the Popper should be interactive, it will close when clicked/hovered if false
content null If your content is just a simple string, you can pass it as a prop

Events

Name Description
open:popper When the Popper is open
close:popper When the Popper is hidden

Slots

Name Description
content For the Popper content

Slot props

The content slot gives you access to useful variables and functions.

Name Type Description
close function A function to close the Popper
isOpen boolean The open state of the Popper

CSS variables

Popper only comes with some barebones styling by default, but it also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

CSS variable Example value
--popper-theme-background-color #ffffff
--popper-theme-background-color-hover #ffffff
--popper-theme-text-color inherit
--popper-theme-border-width 1px
--popper-theme-border-style solid
--popper-theme-border-color #eeeeee
--popper-theme-border-radius 6px
--popper-theme-padding 16px
--popper-theme-box-shadow 0 6px 30px -6px rgba(0, 0, 0, 0.25)
Issues
  • let content know if open

    let content know if open

    hey great work! i'm just switching to vue 3 and used vue-tippy before

    what i'm struggling with:

    situation 1: often i load more content from server when tippy is shown. i COULD solve this with the show-event but its really dirty ^^ it would be nice if i nut just could "import" the close-function, but also isOpen example: <template #content="{close, isOpen}">

    if this would be possible i could conditionally decide what to render and trigger what to fetch for the server

    situation 2: is it possible to use 1 popper for multiple elements? in vue-tippy i could use :to="element" to change the element where the popper was bound to why: in a table with 100 rows and 3 columns where every column has a popper, this would be 300 poppers nice would be to have 3 popper, one for each column and when i hover over a table-cell i will change a variable so the content within the popper can update is that possible?

    opened by mech01nc01 6
  • Render popper element based on condition

    Render popper element based on condition

    Hi! First of all; great job writing this very easy to use popper component!

    I would like to request a feature regarding conditional rendering. I have the following scenario:

    <template>
      <Popper arrow hover>
        <button> hover me! </button>
        <template #content v-if="condition ">
          Show popper only when condition is met
        </template>
      </Popper>
    </template>
    

    Shown result

    I get an empty popper element on hover, due to the fact that I conditionally render the content template.

    Expected result

    I can pass a show prop to the Popper component, or the popperNode checks if the content slot is defined: https://github.com/valgeirb/vue3-popper/blob/main/src/component/Popper.vue#L18

    I would like the popper element to not be rendered / shown when I explicitly say so. It can be visible by default (implicitly) of course.

    bug enhancement 
    opened by bnachtweh 4
  • Keeping popper open while hovering over it

    Keeping popper open while hovering over it

    Hey, I love what you've got so far! I do have a specific need though for our client and I was going to see if you could help me out? Basically, when using the "hover" option for the Popper, we would like to keep the popper open as long as the user is hovering over either the trigger element or the popper itself. We are using this to provide a user some options (with buttons for confirming/rejecting and such) when hovering over certain elements. Is there any way we can make that happen? I'd appreciate it, and thanks for your time!

    enhancement 
    opened by thebreadlord 4
  • Keep popper open on hover

    Keep popper open on hover

    Is there a way to keep popper open after user hovers on the trigger(for nav dropdown purposes)?

    opened by michaelscraft 3
  • Add a

    Add a "show" property to allow manual control

    Maybe this is already possible but couldn't figure it out from the doc, but I need a way to manually show the popper, a "show" or similar property would allow for this.

    enhancement 
    opened by mt-gareth 2
  • 'Close' slot property is undefined

    'Close' slot property is undefined

    'close' slot property is undefined on popover showing, it's okay to add some checking like

        if (popover && popover.close) {
          popover.close();
        }
    

    Also problem can be looked at demo page.

    Error text is

    TypeError: Cannot destructure property 'close' of 'undefined' as it is undefined.

    bug 
    opened by 0leg53 1
  • Add ability to conditionally render Popper

    Add ability to conditionally render Popper

    Closes #1

    bug enhancement 
    opened by valgeirb 0
  • Refactor and bugfixes

    Refactor and bugfixes

    • Proper reactions when slot content is defined/undefined
    • Fix "close slot property is undefined" error (fixes #4 )
    opened by valgeirb 0
  • License Information

    License Information

    Can you please add an MIT license to your great project :)

    opened by robokozo 0
  • Create LICENSE

    Create LICENSE

    Closes #7

    opened by valgeirb 0
  • add typescript declaration file?

    add typescript declaration file?

    it will perfect if add it :)

    documentation enhancement 
    opened by littlecxm 1
  • Add more transition options

    Add more transition options

    Add a new prop that gives more options for how the Popper transitions its open/close state.

    Currently fade is baked in, look into adding more.

    enhancement 
    opened by valgeirb 0
  • Is it possible to use one Popper for multiple elements?

    Is it possible to use one Popper for multiple elements?

    Investigate if this is a realistic improvement.

    Original issue description #3:

    is it possible to use 1 popper for multiple elements? in vue-tippy i could use :to="element" to change the element where the popper was bound to why: in a table with 100 rows and 3 columns where every column has a popper, this would be 300 poppers nice would be to have 3 popper, one for each column and when i hover over a table-cell i will change a variable so the content within the popper can update is that possible?

    enhancement 
    opened by valgeirb 0
  • Prevent a Popper with a delay from closing if the cursor left and then returned before it started closing

    Prevent a Popper with a delay from closing if the cursor left and then returned before it started closing

    If you have a Popper with a closeDelay and hover props and you

    1. Hover over the trigger
    2. Leave the trigger
    3. Hover again before it closes

    It still closes. It should stay open.

    bug 
    opened by valgeirb 0
  • Is there a way to avoid slot wrapper?

    Is there a way to avoid slot wrapper?

    Hi. Thank you for this great component!

    But, it makes additional <div> on top of my slot content.

    Question: Is there a way to avoid this? (Use default slot directly, not in the wrapper)

    Thanks!

    https://github.com/valgeirb/vue3-popper/blob/9306f8d4a1842b41c1afa49c7d7e371bc0c7a420/src/component/Popper.vue#L3-L15

    opened by osbre 5
Releases(v1.1.0)
  • v1.1.0(Jul 22, 2021)

  • v1.0.0(Jul 14, 2021)

    🎉 Version 1.0.0 🎉


    Felt the time was right for a v1.0.0 since v0.6.0 had some breaking changes. From now on I will strictly adhere to semantic versioning.

    These props have now been renamed:

    offsetX ➡️ offsetSkid offsetY ➡️ offsetDistance

    Added:

    • content prop for simplified usage
    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Jul 14, 2021)

    • Add interactive prop
    • Make Popper hoverable by default
    • Rename offset props for more clarity

    offsetX is now offsetSkid offsetY is now offsetDistance

    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(Jul 13, 2021)

  • v0.4.0(Jul 8, 2021)

    Refactoring and bugfixing

    • Proper reactions when slot content is defined/undefined
    • Fix "close slot property is undefined" error (fixes #4)
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jul 7, 2021)

    Added new props:

    | Name | Default | Description | | ------------------ | -------- | --------------------------------------------------------------------------- | | disabled | false | Disables the Popper. If it was already open, it will be closed. | | openDelay | 0 | Open the Popper after a delay (ms) | | closeDelay | 0 | Close the Popper after a delay (ms) |

    Source code(tar.gz)
    Source code(zip)
  • v0.2.3(Jul 6, 2021)

:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

vue-gallery ?? VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. E

Igor Ognichenko 408 Jul 16, 2021
Easy to use, highly customizable Vue.js modal library.

Vue.js modal Easy to use, highly customizable Vue.js modal library. ?? Examples ?? Documentation ?? Changelog ?? Looking for maintainers ?? Sponsorshi

Yev Vlasenko 3.9k Jul 26, 2021
Promisify dialogs in Vue!

Guide & Demo | 2.x docs | 1.x docs Introduction Promisify dialogs! A typical and essential type of user interaction is dialogs. Dialogs are somehow si

Jingkun Hua 270 Jun 5, 2021
A simple Vue.js component for fullscreen, based on screenfull.js

A simple Vue.js component for fullscreen, based on screenfull.js

mirari 355 Jul 20, 2021
Vue modals with a single component

Vuedals VueJS (2.x) Plugin for multiple modals windows with a single component instance. DEMO View demo on jsFiddle What is this? A plugin to open sto

Javis V. Pérez 103 May 24, 2021
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

mirari 1.6k Jul 24, 2021
A lightweight, promise based alert, prompt and confirm dialog

Vuejs Dialog Plugin A lightweight, promise based alert, prompt and confirm dialog. Demo https://godofbrowser.github.io/vuejs-dialog/ Important updates

Emeke Ajeh 337 Jul 12, 2021
A simple image / (YouTube) video lightbox component for Vue.js.

Vue It Bigger! A simple image / (YouTube) video lightbox component for Vue.js. Based on vue-image-lightbox. Click on the screenshot above for a demo.

 haiafara.ro 111 Jul 21, 2021
Simple and intuitive, highly customizable modal component for Vue.js.

Transform Vue.js 2.0+ component into modal with powerful layout and transition support

Yuqiao Chen 7 Jun 7, 2021
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final Modal Looking for a Vue 3 version? It's over here ?? Documentation ?? Examples Introduction Vue Final Modal is a renderless component! You c

Vue Final 192 Jul 21, 2021
Vue.js component for accessible modals

vue-accessible-modal Vue.js component for accessible modals. vue-accessible-modal Features Demo Installation Via NPM Via Yarn Initialization As a plug

Andrew 15 May 3, 2021
Reusable Modal component, supports own custom HTML, text and classes.

Vue Modal ?? Intro Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content /

Mel Macaluso 26 Dec 2, 2020
Very simple lightbox plugin (without any dependencies) for Vuejs 🌅

Pure JS lightbox component for Vue.js Table of contents Demo Installation With NPM With a CDN Usage With an ES6 bundler (via NPM) Importing a componen

Dariusz Czajkowski 151 Jul 10, 2021
Modal window for vue.js

Vudal Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent) Install plugin import { VudalPl

Egor Vakhrushev 37 Jun 28, 2021