popgun

A pure Javascript popover component for high performance and feature-rich web applications

Usage no npm install needed!

<script type="module">
  import popgun from 'https://cdn.skypack.dev/popgun';
</script>

README

[![npm][npm-badge]][npm-badge-url] [npm-badge]: https://img.shields.io/npm/v/popgun.svg [npm-badge-url]: https://www.npmjs.com/package/popgun

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.

html

<!-- On hover, a text popover will appear. -->
<div popgun popgun-trigger="hover" popgun-text="Hello World"></div>

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 -->
<div popgun popgun-group="sampleGroup1"></div>

<!-- On click or hover, a text popover will appear. -->
<div popgun popgun-group="sampleGroup2"></div>

<!-- On click or hover, a text popover will appear with the overriden inline attribute. -->
<div popgun 
     popgun-group="sampleGroup2" 
     popgun-text="Inline attribute override group attributes, which override schema options.">
</div>

js

// A base schema 
var schema = {
  hoverDelay: 200,
  trigger: 'hover'
}
popgun.registerSchema('sampleSchema', schema);

// A group based on schema
var group = {
  schemaId: 'sampleSchema',
  options: {
    html: '<div>html element</div>'
  }
}

// Another group based on schema that overrides one of the schema attribute
var anotherGroup = {
  schemaId: 'sampleSchema',
  options: {
    text: 'This is sample text.',
    trigger: 'click hover'
  }
}

popgun.registerGroup('sampleGroup1', group);
popgun.registerGroup('sampleGroup2', anotherGroup);

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.addEventListener('PopgunPreShow', function(e) {
  console.log('PopgunPreShow');
}, false);

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.