A tiny, fast, configurable popover in 1.6kb.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore . Oct 2, 2018
README.md . Oct 2, 2018
index.js
package-lock.json 1.0.2 Nov 10, 2018
package.json

README.md

poppy

A tiny, fast, configurable popover in 1.6kb. 🍻

Usage

import Poppy from 'poppy'

const target = document.getElementById('target')

const pop = new Poppy({
  target: target,
  popover: `
    <div class='my-popover'>
      <h5 class='mv0'>I'm a popover!</h5>
    </div>
  `,
  position: 'left', // from tackjs
  transitionSpeed: 200, // for css transitions
  onChange: ({ pinned }) => {...} // boolean
})

target.addEventListener('mouseenter', pop.pin)
target.addEventListener('mouseleave', pop.unpin)

Required CSS:

.poppy {
  position: absolute;
  z-index: 9999;
  top: 0; left: 0;
}

The Name

Huge thanks to swathysubhash for letting me use the name! This library used to be called micro-popover.

License

MIT License (c) 2018 Eric Bailey