capsid-popper v2.0.0
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
Then place popper
component:
...
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
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
. Removedata-popper-prevent-overflow
anddata-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