JarCasting
JarCasting JarCasting

popover

WebJar for popover

License

License

ISC
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

popover
Last Version

Last Version

2.4.0
Release Date

Release Date
Type

Type

jar
Description

Description

popover
WebJar for popover
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/klaemo/popover

Download popover

Filename Size
popover-2.4.0.pom
popover-2.4.0.jar 11 KB
popover-2.4.0-sources.jar 22 bytes
popover-2.4.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/popover/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>popover</artifactId>
    <version>2.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/popover/
implementation 'org.webjars.npm:popover:2.4.0'
// https://jarcasting.com/artifacts/org.webjars.npm/popover/
implementation ("org.webjars.npm:popover:2.4.0")
'org.webjars.npm:popover:jar:2.4.0'
<dependency org="org.webjars.npm" name="popover" rev="2.4.0">
  <artifact name="popover" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='popover', version='2.4.0')
)
libraryDependencies += "org.webjars.npm" % "popover" % "2.4.0"
[org.webjars.npm/popover "2.4.0"]

Dependencies

compile (4)

Group / Artifact Type Version
org.webjars.npm : brfs jar [1.2.0,2)
org.webjars.npm : debounce jar [1.0.0,2)
org.webjars.npm : domify jar [1.3.1,2)
org.webjars.npm : emitter-component jar [1.1.0,1.2)

Project Modules

There are no modules declared in this project.

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

Versions

Version
2.4.0