Popover NPM | npm.io

Popover Component

Pretty small (7.5kb minified, 2.6kb gzipped), pretty reliable popovers. Loosely follows Backbone's/Ampersand's View Conventions, but doesn't require to be used with either one.

Take a look at test/test.html or the demo site for examples. Both use the entirely optional themed version, so don't let that fool you ;-).

Installation

npm install --save popover

or download popover.built.js

Usage

Get it in your page either by script tag or module loader/browserify. You'll also need at least popover.css or style them yourself.

var popover = new Popover({
  button: document.querySelector('#triggering-button'),
  position: 'left|top|right|bottom',
  className: 'optional space-delimited css-classes',
  align: 'left|top|right', // optionally aligns popover relative to button
  template: 'HTMLString|DOMElement' // optional
})
popover.render()

API

popover.setButton('String|DOMElement'): Attaches popover to given element
popover.setContent('String|HTMLString|DOMElement'): Sets the content of the popover
popover.render(): Renders, positions and displays the popover
popover.remove(): Removes the popover from the DOM
popover.el: The popover DOM element

The methods are chainable. So, for example popover.setContent('foo').setButton('#button').render().el will work.

Events

shown the popover is shown
removed the popover is removed

Templates

Standard template:

<div class="popover">
  <div class="popover-arrow"></div>
  <div class="popover-content"></div>
</div>

If you're passing in a custom template, at least .popover-content has to be present. The popover comes with minimal styles, feel free to adapt it to your needs. For your convenience there is a themed version in popover-theme.css.