AngularStrap -- Popovers

AngularStrap中的Popovers，提供了一个popover的类似tooltip的小窗体，内部的内容可以简单，也可以提供复杂和交互操作。

先看官网提供的样例：

这个是比较复杂的，有模板html提供了复杂的交互功能。

下面看看具体的使用。

• Plugin dependency
  Popovers require the tooltip module to be loaded.

下面提供的4个例子操作。

<!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} --><button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover  <br>  <small>(using an object)</small></button><!-- You can also use data-attrs to assign scope variables --><button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover  <br>  <small>(using data-attrs)</small></button><!-- You can use a custom html template with the `data-template` attr --><button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover  <br>  <small>(using data-template)</small></button><!-- A popover can also be triggered programmatically using the $popover service --><button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover  <br>  <small>(using $popover service)</small></button>

• Usage
  Append a bs-popover attribute to any element to enable the directive.

The module exposes a $popover service
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'});