CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap
om_jaipur
om_jaipur

Reputation: 2196

How to use Angular UI Bootstrap Tooltip

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.

Upvotes: 0

Views: 1420

Answers (2)

Arun Sahani
Arun Sahani

Reputation: 72

Use like this:

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

it will load only tooltip library.

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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.

Upvotes: 1

Related Questions