popover

Tiny, reusable popover component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
popover
1322.4.18 years ago9 years agoMinified + gzip package size for popover in KB

Readme

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.

Contributors

License

ISC