Tuesday, June 28, 2016

AngularJS - BootStrap Popover Directive

In some cases we need to show some popover as tooltip or as dialog

Here am going to use BootStrap Popover, this plugin is part of BootStrap.js file or we can include spearately. For more information about that read here 

I am going to create simple popover

Step 1; Create your html pages, include BootStrap js files, AngularJS, JQuery basic setups

Step 2: Here is what I created directive to make PopOver work with AngularJS, add this directive to your application

var app = angular.module('appModuleName');

app.directive('popover', ['$compile',function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).popover({
                html: true,
                title:  attrs.popoverTitle || "Header",
                content: function () {
                    return $compile($("#" + attrs.popoverContent).html())(scope);
                },
                placement: attrs.popoverPlacement || "top"
            });
        }
    };

}]);


Step 3: In your HTML, just use this directive and pass attributes

<input type="button" popover popover-title="Header Text" popover-content="popover-content-id" popover-placement="top"/>

Step 4: Here you can pass your Title, ContentId, placement (Top, Bottom, Right, Left) etc.  This popover-content-id is div with contents

  <div id="popover-content-id" class="hide">
Some content here..
  </div>

11 comments:

  1. Hello,
    Can you give me example to bind popover on ui-grid table in angularJS.
    Suppose there is one table containing 3 columns ID, Name and Company.
    and if i take input from user for company name then after clicking the button search, there should be a popover hanging above that company name.

    ReplyDelete
  2. Hello,
    Can you give me example to bind popover on ui-grid table in angularJS.
    Suppose there is one table containing 3 columns ID, Name and Company.
    and if i take input from user for company name then after clicking the button search, there should be a popover hanging above that company name.

    ReplyDelete