fauzankhan / angular-popover

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

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

angular-popover's Issues

Hi there, very nice module, however, can u please add the unminified version of app.js to the repo?

Hi there, upon analysing your source code to learn how to use this module, I found that only the minified version of app.js has been included.

Can you kindly include the app.js version? I think it will be helpful for those bootstrapping this module into their apps... thanks

jQuery Dependency

You have a nice job here, congrats! I see in your code functions from jQuery like outerWidth and outerHeight, you talk about remove jQuery dependency in the README file, how you will remove this dependencies?

please provide a npm package

could you please provide a npm package

What's the license?

Hi Fauzan, great job with this component.

I would like to use this library in one of our products but that depends on the license. Is it MIT?

Could you add the license information to the source code?

For example, the LICENSE file in https://github.com/angular-translate/angular-translate

Cheers
Fernando

Option to open ngPopover with a manual trigger

Is it possible to open the ngPopover manually, the same way as to close it?

Cannot read property 'addEventListener' of null

How can I solve this problem?

Back drop: false like bootstrap modal popup

Hi,
According to client request, popup won't be close if click on document. Its should close when user click on close button.
how can I achieve this? Is it any possible to so that through the plugin?

Option to open ngPopover on 'hover'

Many a times, the use case of loading content on over appears (Eg: User info)
It would be great to have a on-hover handler.

could not get this to work in my app... :(

Hi there, are you using a specific version of jquery or angular?

I tried the demo app and it worked, however, I could not get it to work in my app,

doesn't hide what's inside of the directive

use inside ng-repeat

Hi,
I'm trying to use your code to create popups for individual items that I show in the table. Unfortunately, I'm not able to make it work. I create the ng-popover instances as:

<ng-popover
         trigger="popover-trigger-{{$index}}"
...

and items that should trigger the popovers as:

<span id="popover-trigger-{{$index}}" class="button ng-popover-trigger">
     {{user.userUri}}
</span>

unfortunately, inside your code, where you do the event listening, the trigger is empty:

trigger.addEventListener('click', ...

Any clean idea how to fix this? I need ng-popovers for each item since I need to bind the content about the user to them.

Thanks!