如何使用Angular UI Bootstrap工具提示

Question

I want to use Angular UI Bootstrap Tooltip ui.bootstrap.tooltip separated.

I'm able to use tooltip by adding full ui-bootstrap file, like:

<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>

But I want to include only tooltip functionality instead of adding full UI Bootstrap featured.

Answer 1

Use like this:

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

it will load only tooltip library.

Answer 2

You can use this block of code

<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>

Controller

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

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

};

Here is the working link to JSFIDDLE to see it working.