AngularJS tooltip by using UI Bootstrap tpls HTML

Today now in this post i will show you AngularJS tooltip by using UI Bootstrap tpls HTML. We are mainly use tooltip for the user hovers on his cursor over any specific element purpose. Today now in this post i will be going to create the tooltip when we cursor hovers on any button, so in this example i will use ui-bootstrap-tpls plugin for the tooltip. So If you don’t know more about this plugin then i hope no worry it is from the scratch.

Now In this example i will added the four button for the different placement as like as top, right, left and bottom, so on that way we can use it any more that we want.

So let’s see the bellow example and also we can check the demo.

<html lang="en-US">

<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>


<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,">Tooltip Left</button>
    <button class="btn btn-danger" tooltip-placement="bottom" uib-tooltip="Hi,">Tooltip Bottom</button>
    <button class="btn btn-info" tooltip-placement="top" uib-tooltip="Hi,">Tooltip Top</button>
    <button class="btn btn-warning" tooltip-placement="right" uib-tooltip="Hi,">Tooltip Right</button>

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


Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.


About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →