Angular-Popgun
Welcome to Angular-Popgun - the AngularJS adapter for Popgun!!
What is Popgun?
Popgun is a pure Javascript popover component for high performance and feature-rich web applications!
How to Use
Simple implementation
Define a target element and set some inline attributes and initialize Popgun in the controller.
html
<!-- On hover, a text popover will appear. -->
js
popgun;
Register Groups and Schemas
If there are a lot of popgun elements, rather than define inline attributes, register groups and schemas.
html
<!-- On hover, an html element popover will appear --> <!-- On click or hover, a text popover will appear. --> <!-- On click or hover, a text popover will appear with the overriden inline attribute. -->
js
// A base schema var schema = hoverDelay: 200 trigger: 'hover'popgun; // A group based on schemavar group = schemaId: 'sampleSchema' options: html: '<div>html element</div>' // Another group based on schema that overrides one of the schema attributevar anotherGroup = schemaId: 'sampleSchema' options: text: 'This is sample text.' trigger: 'click hover' popgun;popgun; popgun;
Popgun Attributes
Some Popgun attributes that you can define are:
- containerCushion: (int - default 10) the amount of padding between the popover border and the window.
- darkStyle: (boolean - default false) Sets a dark theme to the popover.
- disable: (boolean - default false) Clicking elsewhere on the page of a pinned popover will not hide the popm if this is set to true.
- disableClickOff: (boolean - default false) When triggering a popgun target, the popover will not display if this attribute is set to true.
- fadeDuration: (int - default 100) time for pop to fade in and out.
- html: an html element for the content of the popover (will take precedence over the text attribute).
- optimzePlacement: (boolean - default true) popgun will decide how to best position the popover.
- placement: (string - default 'top') you can set placement of popover around target - 'top', 'bottom', 'left', 'right'.
- reusePopover: (boolean - default true) boolean which sets whether popgun will reuse the same popover when moving between two Popgun targets of the same group.
- showDelay: (int - default 0) the time it takes between the user triggering the target and the popover appearing.
- text: text content for the popover.
- timeToHoverOnPop: (int - default 300) the time a user has to hover back over the popover when they hover off the target.
- tipClass: (string - default '') Adds css classes to the popover container (class names should be space separated).
- trigger: (string - default 'hover') triggers for the target to show pop - 'hover', 'click', 'focus'.
DOM Events
Throughout the life cycle of the popover, Popgun will fire the following events onto the target:
Show States
- PopgunContentSetup
- PopgunPrePosition
- PopgunPreShow
- PopgunShowing
Hide States
- PopgunPreHide
- PopgunHidden
js
el;
Run Demo Popgun Application
Run bin/iqb install
to install the npm and typings dependencies.
Run bin/iqb start
to run a demo application with Popgun.