code: function messagePopoverComponent() {
    return {
      restrict: 'A',
      scope: true,
      controller: 'NgeoPopoverController as popoverCtrl',
      link: (scope, elem, attrs, ngeoPopoverCtrl) => {
        if (!ngeoPopoverCtrl) {
          throw new Error('Missing ngeoPopoverCtrl');
        }
  
        ngeoPopoverCtrl.anchorElm.on('inserted.bs.popover', () => {
          ngeoPopoverCtrl.bodyElm.show();
          ngeoPopoverCtrl.shown = true;
        });
  
        ngeoPopoverCtrl.anchorElm.popover({
          container: 'body',
          html: true,
          content: ngeoPopoverCtrl.bodyElm,
          boundary: 'viewport',
          placement: attrs['ngeoPopoverPlacement'] || 'right'
        });
  
        if (attrs['ngeoPopoverDismiss']) {
          $(attrs['ngeoPopoverDismiss']).on('scroll', () => {
            ngeoPopoverCtrl.dismissPopover();
          });
        }
  
        scope.$on('$destroy', () => {
          ngeoPopoverCtrl.anchorElm.popover('dispose');
          ngeoPopoverCtrl.anchorElm.unbind('inserted.bs.popover');
          ngeoPopoverCtrl.anchorElm.unbind('hidden.bs.popover');
        });
      }
    };
  }
docs: Provides a directive used to display a Bootstrap popover.
  
  <div ngeo-popover>
  <a ngeo-popover-anchor class="btn btn-info">anchor 1</a>
  <div ngeo-popover-body>
  <ul>
  <li>action 1:
  <input type="range"/>
  </li>
  </ul>
  </div>
  </div>
  
  @ngdoc directive
  @ngInject
  @ngname ngeoPopover
  @return {angular.IDirective} The Directive Definition Object.