AngularJs的UI组件UI-引导的工具提示和弹出

工具提示和popover是轻量级和可扩展的提示指令。对于移动终端来说，虽然这两条指令可以正常工作，但从用户体验的角度来看，并不推荐。

先说工具提示。工具提示有三种使用方式：

(1)uib-工具提示定义了提示的文本

(2)uib-tooltip-html定义提示的html字符串，不会编译成html内容(需要使用$sce.trustAsHtml编译成html内容)。注意内容安全，防止脚本攻击

(3)uib-tooltip-template定义了提示的html内容，它需要放在span或div标签中

代码是：

！DOCTYPE html html ng-app=' ui . bootstrap . demo ' xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/link href='/Content/bootstrap . CSS ' rel=' external no follow ' rel='样式表'/title/title script src=' http :/Scripts/angular . js '/script script src=' http :/Scripts/ui-bootstrap-tpls-1 . 3 . 2 . js '/script script angular . module(' ui . bootstrap . demo '，['ui.bootstrap'])。controller(' tooltipdemocrtl '，function ($ scope，$ SCE){ $ scope.html tooltip=$ SCE . trust ashtml('代码示例codeid :5/code ')；$scope.text=“某些文本”；});/script script type=' text/ng-template ' id=' mytooltiptemplate . html ' Div使用模板的提示框strong标记/strong { { text } }/Div/script/Head body style=' padding :30 px ' Div ng-controller=' tooltip democrl ' Div class=' form-group '按钮工具提示-放置=' right' UIB-tooltip=' text提示框' type=' Button ' class=' BTN BTN-default ' Button/Button/Div class=' form-group '

以上三个工具提示可以使用的属性是：

属性名称默认值备注工具提示-动画true是否使用动画工具提示-追加到正文false是否在正文工具提示末尾放置提示框-类自定义类名工具提示-在工具提示上启用true t是否启用Ooltip-is-open false是否显示提示框工具提示-放置顶部提示框位置。可设置的值包括：上、左上、右上、下、左下、右下、左、左上、左下、右上。右下方工具提示-弹出-关闭-延迟0关闭提示框之前的延迟时间工具提示-弹出-延迟0显示提示框之前的延迟时间工具提示-触发鼠标输入在工具提示-放置指示的位置前显示带有“自动”的提示框的触发事件，例如，“自动顶部”提示框将位于其最近的可滚动父元素中。

工具提示触发器支持的用于显示和隐藏提示框的事件有：

鼠标输入：鼠标离开点击：点击外部点击：外部点击焦点：模糊不清

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

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

当设置为外部单击时，在元素上单击一次将显示提示框，在元素外部单击一次将隐藏提示框。

当设置为无时，它可以与tooltip-is-open属性结合使用，以控制提示框的显示和隐藏时间。

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

如下所示：

angular . module(' ui . bootstrap . demo '，['ui.bootstrap'])。config([' $ uibtooltiprovider '，function(uibtooltiprovider){ uibtooltiprovider . options({ animation : false，appendToBody: false，placement: 'right '，popupclosedeplay : 0 0，popupdelay : 0 0，})；uibtooltiprovider . settriggers({ ' openTrigger ' : ' closeTrigger ' })；}]).控制器(' TooltipDemoCtrl '，函数($ scope){ })；以上是tooltip的内容，然后是popover，popover的实现是一个依赖tooltip的模块，所以这两个指令在使用和配置上都非常相似。

还有三种使用弹出窗口的方法，分别是UIB弹出窗口、UIB弹出窗口模板和UIB弹出窗口html。含义和用法与工具提示相同，在此不再赘述。

popover的属性包括：

属性名默认值备注popover-动画true是否使用动画弹出-追加到正文false是否在正文末尾放置提示框popover-启用true是否启用弹出-打开false是否显示提示框popover-放置顶部提示框位置。可设置的值包括：上、左上、右上、下、左下、右下、左、左上、左下、右上。右下弹出-弹出-关闭-延迟0关闭提示框前的延迟时间弹出-弹出-延迟0显示提示框前的延迟时间弹出-触发鼠标输入显示提示框的触发事件。弹出标题的大多数属性与工具提示相同，除了没有弹出类和有另一个弹出标题。

需要注意的是，popover的全局配置和tooltip一样，都是用$ uibtoolprovider配置的。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。