robinck/vue-popper

:whale: VueJS popover component based popper.js 🇺🇦

vue-popperjs

VueJS popover component based on popper.js

Example

jsFiddle

Install

CDN

Recommended: https://unpkg.com/vue-popperjs, 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-popperjs/

NPM

npm install vue-popperjs --save

Yarn

yarn add vue-popperjs

Bower

bower install vue-popperjs --save

Development Setup

# install dependencies
npm install

# build dist files
npm run build

Usage

VueJS single file (ECMAScript 2015)

<template>
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</template>

<script>
  import Popper from 'vue-popperjs';
  import 'vue-popperjs/dist/vue-popper.css';

  export default {
    components: {
      'popper': Popper
    },
  }
</script>

Browser (ES5)

<link rel="stylesheet" href="vue-popper.css">
<script type="text/javascript" src="popper.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-popper.js"></script>

<div id="app">
  <popper
    trigger="clickToOpen"
    :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }">
    <div class="popper">
      Popper Content
    </div>

    <button slot="reference">
      Reference Element
    </button>
  </popper>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    components: {
      'popper': VuePopper
    }
  });
</script>

Props

Props	Type	Default	Description
disabled	Boolean	false
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
append-to-body	Boolean	false
visible-arrow	Boolean	true
force-show	Boolean	false
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 click (deprecated - same as clickToToggle) focus - opens popper on focus event, closes on blur.
content	String	null
enter-active-class	String	null
leave-active-class	String	null
boundaries-selector	String	null
transition	String	empty
options	Object	{ placement: 'bottom', gpuAcceleration: false }	popper.js options
data-value	Any	null	data of popper
stop-propagation	Boolean	false
prevent-default	Boolean	false
root-class	String	empty	Class name for root element

Events

Name	Params	Description
created	context[Object]	Created popper component
show		Show popover
hide		Hide popover
document-click

Other my Vue JS plugins

Project	Status	Description
vue-ls		Vue plugin for work with local storage, session storage and memory storage from Vue context
vue-gallery		Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT © Igor Ognichenko

vue-popper's Issues

Default styling

The library is great, but I would like to show my use case.

I implemented the library and the default styles are fine, except the box-shadow does not work in our UI. It's creating a nasty scene due to CSS specificity.

It's proving quite difficult to just override the style. It has the potential to cause issues later if the library is updated depending how I customize what is provided in node_modules/vue-popperjs/dist/css/vue-popper.css.

It's a problem because our project is using Tailwind CSS, so I am trying to apply ultra-low specificity classes which are not working.

I would prefer to just not use the default styling from the popper class, but the library comes with additional styles that have bearing on z-index and absolute positioning, so those would be nice for our project to not have to care about, but I would prefer to control everything else related to appearance.

<template>
    <v-popper trigger="click" :options="{ placement: 'bottom' }" enter-active-class="shadow-lg">
        <div class="popper">
            <div class="flex flex-col">
                <a :href="defaultAction" class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-4">
                    CSV
                </a>
                <a :href="urlsAction" class="no-underline text-grey-darkest hover:bg-pink-lighter py-2 px-4">
                    CSV with URLs
                </a>
            </div>
        </div>

        <button slot="reference" class="flex items-center justify-center text-center rounded-full w-8 h-8 bg-pink hover:bg-pink-darker mr-2 no-underline text-white" title="Download">
            <i class="fas fa-download"></i>
        </button>
    </v-popper>
</template>

The problem stems from here:

        <div class="popper">

I do not want any of these styles:

.popper {
  width: auto;
  background-color: #fafafa;
  color: #212121;
  text-align: center;
  padding: 2px;
  display: inline-block;
  border-radius: 3px;
  position: absolute;
  font-size: 14px;
  font-weight: normal;
  border: 1px #ebebeb solid;
  z-index: 200000;
  -moz-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
  -webkit-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
  box-shadow: rgb(58, 58, 58) 0 0 6px 0;
}

except the ones that cause the popover to load in the correct place. Using Tailwind, if I want those props, I will add them as these classes:

class="popper bg-grey text-black text-center p-2 font-base border shadow-lg"

I am reporting this because the only way I was able to change the box-shadow was to add a more-specific CSS declaration:

div .popper {
  box-shadow: none;
}

but then I cannot add shadow-lg class to the class="popper" div because it isn't as specific.

Hopefully that makes sense. It would work better if the library just provided a hook like containerClass where I could add the styles I want.

It's a problem because I could copy/paste the library's popper class styles but that brings implicit risk later if someone updates the library. They would require to know that the styles were overridden in a custom way. The solution would not be immediately obvious if that occurred.

It's a problem because I want the default CSS that the library uses to load the popover correctly, but I don't want the appearance that is given by default.

I'll keep working at solving this in a way that isn't too complex. Thanks for your time. I appreciate the labour of love that saves me time. I'm just trying to look out for those crazy customizers out there while also empathizing with future maintainers of my own project.

Upon further consideration after writing this, I think I'm going to copy the .popper classes and remove everything that changes the appearance, and work with a bare-bones .popper and .popper__arrow classes. Then I can write an annotation that if anyone updates the library and the styles break, they need to analyze whatever is new in node_modules/vue-popperjs/dist/css/vue-popper.css. But optimally, I would like to just load whatever comes with the library and add on top of it, but that is proving difficult.

Show on click and hide on focus out

The tool tip pop up should get minimized when the user clicks out or scrolls the screen.

How to do that with this plugin?

How do I execute the show method from code

This is more a question, rather than a bug, I would like to trigger the show event, I tried this
<popper trigger="click" :options="{placement: 'bottom'}" ref="searchpop" >... </popper> and on the parent
this.$refs.searchpop.doShow(); and nothing happens. Also tried this.$refs.searchpop.$emit("show");

Please update documentation to explain use of force-show property

Thank you so much for such a great integration of popperjs into vuejs! I've been scratching my head for a few days about how to show/hide a popover from parent components. I may just be a little slow, but it didn't register with me that the force-show property could also be used to HIDE the popover, and therefore by passing in a variable that is stored in a parent component or vuex store, it's a breeze to show/hide a popover whenever and however you want.

It would be awesome if the documentation could explain this in a bit more detail. Again, thank you for all you do!

How do I use the transition property?

How can transition attributes be used in conjunction with animate.css?

What do you think?

Hi, I needed use vue-popper without wrap due obstacles with flex etc. Maybe it's a good way how to implement it generally... What's your opinion?
Example

Popper stuck on page when reference disappears

I have a link as a reference inside a on-hover popper. When the user clicks the link, the component is replaced. When that happens, the popper stays on the page and cannot be removed.

<template>
    <popper trigger="hover" :visible-arrow="true" :append-to-body="true">
        <div class="popper">
            <my-tooltip-component></my-tooltip-component>
        </div>

        <router-link slot="reference" :to="somewhere-else">Link</router-link>
    </popper>
</template>

I fixed it by wrapping the link inside <span slot="reference" v-on:click.capture="hidePopper"></span> and by setting popper.disabled=true inside hidePopper(), but I think it would be better for vue-popperjs to catch the event that the reference is removed and to destroy the tooltip.

Thank you for your time and effort!

transition not work

I set prop transition="zoom-in-top"，but it's not work

.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: all 0.2s ease;
transform-origin: center top;
}
.zoom-in-top-enter,
.zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}

Content showing when page loading

For some reason the content of the dropdown is showing when the page is loading, like flickering, specially on mobile, is that right?

That is my dropdown component:

<template>
    <popper
        tag-name="div"
        :visible-arrow="false"
        trigger="clickToToggle"
        :options="{
            ...{ placement },
            modifiers: { offset: { offset: '0, 4' } }
        }"
    >
        <div class="z-50">
            <slot />
        </div>

        <slot slot="reference" name="trigger"></slot>
    </popper>
</template>

<script>
import Popper from 'vue-popperjs'

export default {
    name: 'dropdown',
    components: {
        Popper
    },
    props: {
        placement: {
            default: 'bottom-start'
        }
    }
}
</script>

Manually toggle?

I'm attempting to close the popper automatically after an action has been performed, but it doesn't seem to be working: this.$refs.popper.hide(), how do I do this?

Update
Works with this.$refs.popper.doClose()

Prevent popper closing when document is clicked

I'd like to put a form inside a popper which is opened when a button is clicked. That is fine and easy to achieve with trigger="clickToOpen". However, whenever someone clicks outside the popper, the popper closes, which could be annoying for users. I want to control when the popper closes via a specific 'close' button and other events. Is this possible?

vue-popper wraps components in span, while this is not always desirable

vue-popper wraps components in span, while this is not always desirable

It's not ok if child elements are div. Div is block element, span is inline, div's can't be inside spans
Maybe make wrapper type configurable?

offset error

is it possible change popper offset ?
https://popper.js.org/popper-documentation.html#modifiers..offset

ie. 10px from the top ?

Updating text of centered tooltip doesn't update the tooltip position

I just stumbled upon this problem.

I was however able to solve it by setting a ref="someName" attribute on the <popper> and then using $refs.someName.popperJS.update() manually.

Here's a JSFiddle. Try clicking the "bottom" link:
https://jsfiddle.net/maxpaj/9qvmn093/

Documentation wrong css file

import 'vue-popperjs/dist/CSS/vue-popper.css';

should be import 'vue-popperjs/dist/vue-popper.css';

without "css":-)

When parent container has overflow set, popper positioning screws up

When the parent container has overflow: auto or overflow: scroll set, the placement of the poppers is incorrect.

https://jsfiddle.net/ec4o2wt0/

How can I fix this?

I see a similar issue here perhaps floating-ui/floating-ui#248

Feature Request: don't keep popper when it is moused over

Currently, the popper stays visible when the mouse leaves the reference and hovers over the popper. This behaviour is not always desirable. Please provide an option to disable it, so that the popper is always removed when the reference is left.

[1.3.2] Usage with Nuxt / document is not defined

Hi,
i've been using vue-popper with nuxt for a while with success, but this morning i upgraded the dependencies of my project, and updated to 1.3.2 from 1.3.0, and suddenly this error appears when rendering from the server.

ReferenceError: document is not defined at __vue_create_injector__ (/node_modules/vue-popperjs/dist/js/vue-popper.js:354:16)

Is this a bug or there's some new configuration for SSR which i'm missing out?

Thanks in advance

https://unpkg.com/vue-popperjs is broken

Cannot find "/index.js" in [email protected]

.

.

allow to refresh the component

For my current project, I'm updating some of the options dynamically, specifically the placement, but once I change the placement it's not being applied, so I think to add some method to re-render the component will be great.

Currently, my workaround is to add a key in the component and update that key to force the component to reload, but this is more like a patch, some kind of native method will be great.

<popper
    ref="popper"
    :key="rerenderKey"
...
/>

method () {
 refreshComponent() {
this.rerenderKey++;
}

Add modifiers to documentation

The Popper docs are difficult to parse, and it took me a long time to figure out how to use the offset modifier. This is what I ended up with:

<popper
  :options="{
    modifiers: {
      offset: {
        enabled: true,
        offset: '0,10px',
      },
    },
  }">...</popper>

It would be nice if the vue-popper docs mentioned how to use modifiers with this plugin.

Styling the popper

Hi,

Thanks for the component - it's really helped me out :-) I'm wondering though, how to over-ride the css styling on the popper element? I've tried skipping the import "vue-popperjs/dist/css/vue-popper.css" line in my component and defining matching css in my main stylesheet - but the original style still seems be being generated. In my js bundle I can see a bit of code which is inserting the original style like :

 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
    if (!inject) return;
    inject("data-v-4732e5aa_0", { source: "\n.popper {\n  width: auto;\n  background-color: #fafafa;\n  color: #212121;\n  text-align: center;\n  padding: 2px;\n  display: inline-block;\n
...

I can see there is a style tag in the component too - but I'm not sure of it's relation to the vue-popper.css file/classes. I'm very likely over-looking something obvious - it's been a long Monday ;-) Any pointers would be greatly appreciated though :-)

Feature Request: delay-on-mouse-over

Please implement a delay-on-mouse-over prop that would let us control a delay in ms before showing popper during a mouse over.

How can I show popper grammatically?

First of all, awesome plugin! It really fits my requirements and helps a lot.

I need to show/hide popup programmatically without DOM manipulations (should be based on router change). Is it possible? If yes how?

Why do you have vue as a dependency?

Why do you have a vue as a dependency?

  "dependencies": {
    "popper.js": "^1.14.3",
    "vue": "^2.5.16"
  },

Shouldn't it be a devDependency?

can you give a example how to use ‘content’？

if i want to show content ，I think this code will report errors

thanks。

Popper.placements

When I use the the { placement: 'right' }, the popper doesn't come to the expected place right away.
It comes relative to the reference element with top: 0 and left: 0. (At the starting position of the reference element).
It's when I scroll the page (or the div in which it's placed), it fixes it's position at the right place.

IE9 Syntax Error

Version 1.x can be bundled with webpack and works in IE9.

Version 2.x leads to a SyntaxError in IE9. Unfortunately my IE9 refuses to tell me in what line the error occurs.

Workaround: Transpile it. If using vue-cli add this to your vue.config.js:

// vue-popperjs >=2.0.0 is not compatible with IE9 (SyntaxError). Must be transpiled.
transpileDependencies: ["vue-popperjs"],

Code not added to dist file but is added to src file

See this ticket with the old PR: #14

The following code is never added in the dist files, only to the src files.

        if (this.appendToBody) {
          document.body.removeChild(this.popper.parentElement);
        }

I have made a PR for you: #17

Dev setup not working

Missing peer dependencies.

npm install
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but noneis installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @babel/core@7 || ^7.0.0-rc.2 but none is installed. You must install peer dependencies yourself.

audited 2498 packages in 4.962s
found 0 vulnerabilities

Problem with Radio-Button

When I use this great package with Radio-Button. It has a problem. When you click on label it keeps hiding!
You can check that here: JSFiddle

Any idea would be great appreciated.

Output produced in dist is not es5 compatible

Remove 'trigger' requirement

Use case

I'd like to only open the popper programmatically, which I am currently achieving toggling the 'force-show' prop. However when I click on the component, I want to have some things happen in the contents of the reference slot before the click event fires.

Suggestion

Set the 'trigger' prop to accept a empty string '' value (or something along those lines)

props: {
     trigger: {
        type: String,
        default: 'hover',
        validator: value => ['click', 'hover', ''].indexOf(value) > -1
      },
      ...
}

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

How to manually show and hide on click

What option do I change to manually show a tooltip and hide it whwnever something is clicked?

Target multiple components inside Popper - currently only works with single instance

I have a button component inside the popper component. Now, only the first button gets a reference but I need all the buttons in the loop to have this. How can I make all the buttons respond to popover?
vhs-button is a custom child component below.

<popper trigger="click" :options="{placement: 'top'}" ref="popOv" v-for="(option, i) in data">
  <div class="popper">
    Test Text
  </div>

 //multiple buttons` here
  <vhs-button slot="reference" :propsData="option" />
  
</popper>

I have multiple choices, and true\falses, that need to show the feedback with a popover and there is always more than one button. It's working otherwise.
If this doesn't make sense I'll try to make a pen for it.

Focus and blur listener is conflict with 'hover' trigger mode

Hi,
When using hover mode, If the popper content includes a link <a href="#">click me</a> and reference element is focus, the link can't be clicked because the blur event will close the popper firstly.

This is a example https://jsfiddle.net/aLuroykm/4/

See #48. Why not add a new trigger mode 'focus' ?

Thanks for your awesome plugin.

Is it possible to attach the popper by using element ID or getBoundingClientRect as reference?

I want to bind the popper component to an element not defined in the component.

Popper.js achieves this by using element by ID or getBoundingClientRect. Is this possible with vue-popper?

So essentially, the component is the popper only and the user decides what to attach it to without having to include the reference in the component.

Great work btw

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.9.3

2019-04-10

Bug Fixes

• Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

• #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

• 516a06d 1.9.3
• a5526ea Update changelog
• c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

appendToBody=true leaves span in body when popper is destroyed

When the appendToBody prop is true, the popper parent element is being left in body.

Reproduces issue: https://jsfiddle.net/psalaets/g7yg9v7s/1/

In that fiddle, the count should never be > 1 but it increases each time you toggle the popover component because the span is not cleaned up.

Popper content must be first child element?

I ran into an error by putting my reference slot button as the first child of the <popper> component, e.g.:

<popper>
  <button slot="reference">Don't do this!</button>
  <div class="popper">foo bar</div>
</popper>

In reality, the popover content div must be the first element, I believe due to this line:

https://github.com/RobinCK/vue-popper/blob/master/src/component/popper.js.vue#L207

Please either (a) add the option to specify a new popper slot explicitly, and/or (b) mention in the docs that the popper content must come first.

appendToBody option not working

This string is actually appends popper content, not the popper itself.
document.body.appendChild(this.popper)
So the popper is always shown.

Please replace it with this.
document.body.appendChild(this.popper.parentElement).

P.S. Great work, thx for sharing.

Nested components not supported

Hi, thanks for this awesome component! I'm using it in http://settle.rs. I tried using nested components in it, but this does not work. Is it possible to support it? How would I start implementing this?

May it be more graceful by using `pkg.module` for es module

May it be more graceful by using pkg.module for es module?

Is there anyway to close the popover while clicking any content of the popover?

Method "handleDocumentClick" won't set the "showPopper" to false if user clicks any content in the popover "e.target".
Is there any recommended way to do so?
If not, would that be a good feature?

Do you have any plan to update `slot` with `v-slot` directive?

Popper did not work when I tried to replace slot with v-slot. slot is deprecated in Vue 2.6.0, Do you have any plan to use new syntax (v-slot)?

Allow both Hover and click trigger at the same time

It would be great to have both hover and click as options instead of choosing one or the other.

Issue Using StopPropagation

when using stopPropagation on slot reference element stoping teh other poppers from closing that has stopPropagation

<popper placement="right" :stopPropagation="true" trigger="click"> <div class="p-4"> How are you </div> <button type="primary" slot="reference"> Open slot </button> </popper>

<popper placement="right" :stopPropagation="true" trigger="click"> <div class="p-4"> I am Fine </div> <button type="primary" slot="reference"> Open sAnother slot </button> </popper>

Why are styles included even if I exclude the stylesheet?

I am trying to overwrite the styles from within my sfc in the <style> tag and some things are not changing. I then notice, even when I don't include the default css, it's still being included.

/* style inject */
__vue_create_injector__() { ..

etc.