ngPopover

Introduction

Fully customizable and easy-to-use AngularJS 1.x directive for elegant multi-directional popovers.

Installation

npm install ng-popover

Usage

  1. Include angular-popover.js (or angular-popover.min.js) after loading AngularJS.
  2. Include angular-popover.css.
  3. Add the angular-popover module to your project:
    var app = angular.module('yourModuleName', ['angular-popover'])
  4. Add the angular-popover directive along with attributes - 'direction' and 'template':
    <div angular-popover direction="top" template="hey there!" style="position: relative;">

Note

IMPORTANT: Keep in mind the element to which you are applying the directive has to be positioned - fixed, absolute or relative.

Demo

There are many options for customising the popovers: using external templates or a string for the popover content, triggering the opening of the popover using either click or hover, closing the popover on mouseleave or click...Lets explore them in detail:

direction

You can decide as to which side the popover will open - top, left, right, and bottom.

<button angular-popover direction="right" template-url="right.html">
Click me!
</button>

template-url

When you want to load the popover with an external template, set template-url to the path of your template.

<button angular-popover direction="top" template-url="top.html">
Click me!
</button>

template

Use the template attribute when you just want to add some text inside the popover. This avoids the hassle of creating an external template everytime.

<button angular-popover direction="top" template="Just some text!">
Click me!
</button>

mode

Decide on what event you want the popover to open - click or mouseover. If not specified, the click event will be used.

<button angular-popover direction="top" template="open on click!" mode="click">
Click me!
</button>
<button angular-popover direction="top" template="open on hover!" mode="hover">
Hover on me!
</button>

close-on-click

Set close-on-click to true if you want the popover to close on click irrespective of the mode. If not set, the popover closes on click only if the mode is click.

<button angular-popover direction="top" template="Just some text!" close-on-click="true">
Click me!
</button>

close-on-mouseleave

Set close-on-mouseleave to true if you want the popover to close on mouseleave irrespective of the mode. If not set, the popover closes on mouseleave only if the mode is mouseover.

<button angular-popover direction="top" template="Just some text!" mode="click" close-on-moueleave="true">
Click me!
</button>