Popover

The bb-popover-template directive enables an HTML-formatted popover for a trigger element to display. This directive is an alternative to the Angular UI Bootstrap uib-popover directive, making it easier to define markup in a template rather than directly in the view's controller.

The bb-popover-template attribute should specify a URL for a template in the $templateCache that will be used as the popover content. The scope applied to this template inherits the current scope. A hide function is also provided on the scope to dismiss the popover.

The directive is built as a thin wrapper of the Angular UI Bootstrap Popover directive and supports all of its optional properties.

Popover settings

  • bb-popover-template — Creates an HTML-formatted popover for a trigger element to display.

Accessibility

By default, the popover is appended to its parent element to make it available in the correct reading sequence and focus order. Do not use the Angular UI Bootstrap popover-append-to-body property to append the popover to the body element because this makes access difficult for people who use assistive technology or keyboard input.

Demo

To see a popover with a title Click here .
To see a popover without a title Click here .
Choose the location of the popover:
Selected beverage: {{popCtrl.selectedItem}}

Markup

<div ng-controller="PopoverTestController as popCtrl">
  <div>
    To see a popover with a title
    <a bb-popover-template="bbPopoverTemplate/samples/samplepopover.html" data-popover-title="More Info">
      Click here
    </a>.
  </div>
  <div>
    To see a popover without a title
    <a bb-popover-template="bbPopoverTemplate/samples/samplepopover.html">
      Click here
    </a>.
  </div>
  <div>
    Choose the location of the popover:
    <button popover-placement="top" bb-popover-template="bbPopoverTemplate/samples/samplepopover.html" class="btn btn-default">Top</button>
    <button popover-placement="bottom" bb-popover-template="bbPopoverTemplate/samples/samplepopover.html" class="btn btn-default">Bottom</button>
    <button popover-placement="left" bb-popover-template="bbPopoverTemplate/samples/samplepopover.html" class="btn btn-default">Left</button>
    <button popover-placement="right" bb-popover-template="bbPopoverTemplate/samples/samplepopover.html" class="btn btn-default">Right</button>
  </div>
  <div>
    Selected beverage: {{popCtrl.selectedItem}}
  </div>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function RunTemplateCache($templateCache) {
        // Typically this would either point to a URL or generated using a Grunt task like html2js.  For demo
        // purposes we'll just manually put the template in the cache.
        $templateCache.put('bbPopoverTemplate/samples/samplepopover.html',
            '<div class="tooltip-container">' +
                '<div>Select a beverage:</div>' +
                '<div><select ng-model="popCtrl.selectedItem" aria-label="Choose a soda" ng-options="item as item for item in popCtrl.items"></select></div>' +
                '<a ng-click="hide()">Close me</a>' +
            '</div>');
    }

    function PopoverTestController() {
        var self = this;
        self.items = ['Coke', 'Sprite', 'Dr Pepper', 'Pibb'];
        self.selectedItem = 'Coke';
    }

    RunTemplateCache.$inject = ['$templateCache'];

    angular.module('stache')
    .run(RunTemplateCache)
    .controller('PopoverTestController', PopoverTestController);

}());