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.

`javascript
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:
`html



`

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

- fmal
- staygrimm

License

ISC