AngularJS tooltip using UI Bootstrap tpls HTML

AngularJS tooltip using UI Bootstrap tpls HTML

 
 

We are mostly use tooltip when the user hovers his cursor over a specific element purpose. In this post we going to create tooltip when cursor hovers on button, in this example i use ui-bootstrap-tpls plugin for tooltip. If you don't more about this plugin then no worry it is from scratch.

In this example i added four button for different placement like top, right, left and bottom, so that way you can use any more that you want. So let's bellow example and also you can check demo.

Example:

<html lang="en-US">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>

<body>
<div ng-app="myApp">
  <h2 class="text-center">AngularJS Tooltip Example</h2>
  <div class="container text-center">
    <button class="btn btn-primary" tooltip-placement="left" uib-tooltip="Hi, Itsolutionstuff.com">Tooltip Left</button>

    <button class="btn btn-danger" tooltip-placement="bottom" uib-tooltip="Hi, Itsolutionstuff.com">Tooltip Bottom</button>

    <button class="btn btn-info" tooltip-placement="top" uib-tooltip="Hi, Itsolutionstuff.com">Tooltip Top</button>

    <button class="btn btn-warning" tooltip-placement="right" uib-tooltip="Hi, Itsolutionstuff.com">Tooltip Right</button>

  </div>

</div>

<script>

var app = angular.module('myApp', ['ui.bootstrap']);

</script>

</body>

</html>