AngularJS tooltip using UI Bootstrap tpls HTML example with demo

By Hardik Savani | July 5, 2016 | | 79237 Viewer | Category : Bootstrap AngularJS


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>



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: