Examples

Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.

Plugin dependency

Popovers require the tooltip module to be loaded.

Live demo clog.info

$scope.popover = {{popover | json}};

Usage

Append a bs-popoverattribute to any element to enable the directive.

The module exposes a $popoverservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myPopover = $popover(element, {title: 'My Title', content: 'My Content', trigger: 'manual'});
        
      

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

For directives, you can naturally inherit the contextual $scope or leverage a custom one with an AngularJS expression to evaluate as an object directly on the bs-popover attribute

This module supports exotic placement options!

You can position your popover in corners (such as bottom-left) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'right' how to position the popover - top | bottom | left | right | auto, or any combination like bottom-left or auto bottom-left.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.
trigger string 'click' how popover is triggered - click | hover | focus | manual
title string '' default title value if titleattribute isn't present
content string '' default content value if data-contentattribute isn't present
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

target string | DOMElement | false false

Position the popover relative to a specific target element.

template string ''

Provide an html template as a string (when templateUrl is falsy).

templateUrl path 'popover/popover.tpl.html'

If provided, overrides the default template, can be either a remote URL or a cached template id.

It should be a div.popover element following Bootstrap styles conventions (like this).

contentTemplate path false

If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.

autoClose boolean false If provided, auto closes the popover when clicking outside of it.
id string '' The popover instance id for usage in event handlers.
onShow function

If provided, this function will be invoked after the popover is shown.

onBeforeShow function

If provided, this function will be invoked before the popover is shown.

onHide function

If provided, this function will be invoked after the popover is hidden.

onBeforeHide function

If provided, this function will be invoked before the popover is hidden.

viewport string | object { selector: 'body', padding: 0 }

Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

Default options

You can override global defaults for the plugin with $popoverProvider.defaults

        
          angular.module('myApp')
          .config(function($popoverProvider) {
            angular.extend($popoverProvider.defaults, {
              animation: 'am-flip-x',
              trigger: 'hover'
            });
          })
        
      

Helper attributes

Helper attributes can be used together with the directive via data-attributes to support specific functionality. Helper attributes support data binding. To use helper attributes, append the helper attribute name to data-, as in data-bs-show="true".

Name type default description
bsShow boolean | string false

shows or hides the popover. Supports boolean values or "true"/"false" string values.

You can also specify "popover" to show just the popover when using several angular-strap directives on the same element.

bsEnabled boolean | string true

enables or disables the popover trigger. When the popover is disabled, calling show() will have no effect.

Supports boolean values or "true" "false" "1" "0" string values.

Scope methods

Methods available inside the directive scope to toggle visibility.

$show()

Reveals the popover.

$hide()

Hides the popover.

$toggle()

Toggles the popover.

$setEnabled(isEnabled)

Enables or disables the popover.