🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An elegant, easily customizable generic popover in Angular that transcludes custom HTML.Features:An angular directive for generic popovers.Popovers can contain simple text to complex html templates.Popovers can have callback functions for opening and closing.Popovers can have custom directions.The script also provides a factory to close all or specific directives manually.Works well with/without Bootstrap/Foundation.

Modal_Popup Plugins

Documentation

ngPopover

An elegant, easily customizable generic popover in Angular that transcludes custom HTML

Description

  • An angular directive for generic popovers.
  • Popovers can contain simple text to complex html templates.
  • Popovers can have callback functions for opening and closing.
  • Popovers can have custom directions.
  • The script also provides a factory to close all or specific directives manually.
  • Works well with/without Bootstrap/Foundation.

Dependecies

  • Angular.js

Installation

  • Copy ngPopover.js and ngPopover.css from the repository and use it the way you like.

Usage

  • Make sure you include the '''ngPopover''' module in you angular app:
angular.module('myApp', ['ngPopover']); 
  • once you've added the module in your app. Use the code below to get the popover up and running:
<ng-popover       trigger="popover-trigger"         // ID of the (trigger) element that'll open/close the popover       direction="left"                // The direction in which the popover hould appear can be equal to top, bottom, left & right. bottom is the default value       popover-class="custom-popover" // CSS Class of your popover. Ideally you should define the styles of your HTML under this class       on-open="openCallback()"      // Function to be called when the popover is shown       on-close="closeCallback()">  // Function to be called when the popover is hidden        <!--- Your custom HTML goes here  --->  </ng-popover> 
  • The trigger element for above popover would look like this:
<span       id="popover-trigger"         // Notice the same ID is provided in the trigger attribute of the popover       class="ng-popover-trigger"> // Add this class to your trigger elements        Open Popover </span> 
  • Ideally all your popovers should be present at the bottom of the body

  • To manually close a popover use ngPopoverFactory

  • Inject ngPopoverFactory in you controller :

angular.module("myApp").controller("myController", function(ngPopoverFactory){  });
  • Once you've injected the factory you can manually close the dropdown by calling the closePopover function of the factory:
ngPopoverFactory.closePopover(triggerId) 
  • You can also close all the popovers at the same time by calling closeAll function of thr factory:
ngPopoverFactory.closeAll(); 

###Customization You can easily customize the look and feel of the popover by changing the following variables in the ngPopover.scss file as per your requirement:

$background-color: #FFF;  // Background color of the popovers $border-color: #EAEAEA;  // Border color of the popovers

###Demo visit http://fauzankhan.github.io/angular-popover/ to see the popover in action


You May Also Like