Parasails Vue-popper component

This is a Vue.js component that can be used with the sails.js and parasails.js. Parasails is essentially a port of Vue.js that is slightly customized to work better within sails.js (or that is at least what I understand)

What is the Vue Popper component?

This is just a component to allow you to use the popper.jsGithub library from within a sailsJs web app. The popper.js website describes this library as a "tooltip & popover positioning engine." This is used throughout the web and popularly in Bootstrap and gives developers the basic tools to calculate the position of a tooltip or popover depending on the position of the element it is anchored to and the possition of the window. It works really well. This is based heavily off RobinCK popper implementation for VueJs.

Setup

Place the follwoing files (css in dependencies, js in components) in their respective directories in your sailsJS or Parasails project. You should be able to use directly in your EJS templates, page component or any other component in sailsJs.

Props

All the props have default values so none of them are necessary. Refer to the popper.js documentation for prop usage. Or the VueJS popper respository

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

An example of use

<popper class="w-100" trigger="clickToOpen" :options="{placement: 'top'}">
    <p @click.prevent="methodInParent">The content you want displayed in your popper</p>
</popper>

Calling methods from within the popper

The parasails popper uses content slots so you can call a method on the content of a popper from the parent component. In the above example "methodInParent()" would be a method in the parent component of the parasails popper.