mgcrea.ngStrap.popover
Add small overlays of content on tap, like those on the iPad, to any element for housing secondary information.
Popovers require the tooltip module to be loaded.
$scope.popover = {{popover | json}};
Append a bs-popover
attribute to any element to enable the directive.
$popover
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myPopover = $popover(element, {title: 'My Title', content: 'My Content'});
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
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 title attribute isn't present |
content | string | '' | default content value if data-content attribute 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:
|
container | string | false | false |
Appends the popover to a specific element. Example:
|
target | string | DOMElement | false | false |
Position the tooltip relative to a specific target element. |
template | path | false |
If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a |
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 tooltip when clicking outside of it. |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the popover.
Hides the popover.
Toggles the popover.