Skip to content
💬 popper as capsid module 💊
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
dist
.babelrc
.bmp.yml
.browserslistrc
.editorconfig
.gitignore
LICENSE
README.md
index.js
karma.conf.js
package.json
test.js
yarn.lock

README.md

capsid-popper v1.4.0

CircleCI codecov Greenkeeper badge

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.

License

MIT

You can’t perform that action at this time.