使用模板的提示框markup{{ text }}
  


  
    按钮

效果分别为：

以上3种tooltip可以使用的属性有：

在tooltip-placement所表示的位置前加"auto"，比如 "auto top"提示框会定位在它最近一个可滚动的父元素中。

tooltip-trigger支持的显示提示框和隐藏提示框的事件有：

mouseenter: mouseleave
click: click
outsideClick: outsideClick
focus: blur
none

使用时只需要设置显示提示框的事件就可以了(隐藏提示框的事件会自动设置)。

设置为click时，在元素上单击一次会显示提示框，再单击一次隐藏提示框。

设置为outsideClick时，在元素上单击一次会显示提示框，在元素之外的其他地方单击一次会隐藏提示框。

设置为none时，可以和tooltip-is-open属性配合使用，自己控制提示框显示和隐藏的时机。

tooltip也支持全局配置，使用$uibTooltipProvider.options可以配置tooltip的默认设置，如是否启用动画，显示的位置，延迟时间等。使用$tooltipProvider.setTriggers可以扩展提示框显示和隐藏的触发事件。

如下：

angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
  .config(['$uibTooltipProvider', function (uibTooltipProvider) {
    uibTooltipProvider.options({
      animation: false,
      appendToBody: false,
      placement: 'right',
      popupCloseDelay: 0,
      popupDelay: 0,
    });
　　　　 uibTooltipProvider.setTriggers( { 'openTrigger': 'closeTrigger' } );
  }]).controller('TooltipDemoCtrl', function ($scope) {

  });

以上为tooltip的内容，再来说popover，popover的实现是依赖于tooltip的module，因此这两个指令在使用和配置上非常相似。

popover也有三种使用方式，分别是uib-popover,uib-popover-template和uib-popover-html，含义和使用方法同tooltip是一样的，这里就不重复说了。

popover的属性有：

大部分属性和tooltip也是一样的，只是没有popover-class，另外多了个popover-title。

需要注意的一点是，popover的全局配置和tooltip一样，是使用$uibTooltipProvider来配置的。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。