如何使用 Angular UI 引导工具提示答案

【问题标题】：How to use Angular UI Bootstrap Tooltip如何使用 Angular UI 引导工具提示
【发布时间】：2017-07-05 09:53:43
【问题描述】：

我想使用 Angular UI Bootstrap Tooltip ui.bootstrap.tooltip 分隔。

我可以通过添加完整的ui-bootstrap 文件来使用工具提示，例如：

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script>var App = angular.module("App", ['ui.bootstrap']);</script>

但我只想包含工具提示功能，而不是添加完整的 UI Bootstrap 特色。

【问题讨论】：

ui.bootstrap 是一个模块 .. 您需要将其添加为依赖项才能使用工具提示。你不能分开它
查看我发布的答案。请注意 JSfiddle 中包含的“外部资源”。您需要将它们包含在您的项目中才能使其正常工作。
我想获取已用于工具提示的特定代码集，而不是添加完整的ui-bootstrap-tpls-0.13.0.js

标签： javascript html angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

这样使用：

angular.module("App", ['ui.bootstrap.tooltip']);

它只会加载工具提示库。

【讨论】：

【解决方案2】：

你可以使用这个代码块

<div ng-app="myApp" ng-controller="TooltipDemoCtrl">
  <div class="well">
    <div>Dynamic Tooltip Popup Text <input type="text" ng-model="dynamicTooltip"></div>
    <div>Dynamic Tooltip Placement <input type="text" ng-model="dynamicTooltipPlacement"></div>
    <p>
      Need some <a><span tooltip="{{dynamicTooltip}}" tooltip-placement={{dynamicTooltipPlacement}}>tips</span></a> ?
    </p>
  </div>
</div>

控制器

var app = angular.module('myApp', ['ui.bootstrap']);
var TooltipDemoCtrl = function ($scope) {

  $scope.dynamicTooltip = "Here is the help";
  $scope.dynamicTooltipText = "tips";

};

这是JSFIDDLE 的工作链接，以查看它的工作情况。

【讨论】：