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 plugin to be included.
$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. Requires some CSS to render properly.
Name | type | default | description |
---|---|---|---|
animation | string | animation-fade | apply a CSS animation powered by ngAnimate |
placement | string | 'right' | how to position the popover - top | bottom | left | right, or any combination like bottom-left. |
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 |
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:
|
template | path | false |
If provided, overrides the default template, can be either a remote URL or a cached template id. |
You can override global defaults for the plugin with $popoverProvider.defaults
angular.module('myApp')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
animation: 'animation-flipX',
trigger: 'hover'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the popover.
Hides the popover.
Toggles the popover.