capsid-popper v2.0.0

capsid component for popper

peer dependency: capsid >= 0.20.2, popper.js ^1.12.9

Install

npm install --save capsid-popper capsid popper.js

Usage

Install the module to capsid:

capsid.install(require('capsid-popper'))

Then place popper component:

<div class="popper" data-popper-placement="left" data-popper-ref="#target">...</div>

This element works as a popper to the reference element with the given placement.

See popper document for available placements.

Options

Some install options are available.

capsid.install(require('capsid-popper'), { name: 'name-of-popper-component' })

name property specifies the name of the component. Default popper. For example, if you pass { name: 'my-popper' }, your popper component should be <div class="my-popper" ...></div>.

Events

popper-update

Dispatching popper-update event on popper components causes the update of the position calculation:

document.querySelectorAll('.popper').forEach(el => {
  el.dispatchEvent(new CustomEvent('popper-update'))
})

The above example updates all the popper components' layouts.

This is useful when you want to change the ref, the placement, or any other configuration of the component.

History

• 2019-04-04 v2.0.0 Add data-popper-modifiers. Remove data-popper-prevent-overflow and data-popper-flip.
• 2019-04-04 v1.6.0 Add data-popper-flip.
• 2019-04-04 v1.5.0 Add data-popper-prevent-overflow.

License

MIT