Using Bootstrap Tooltip With AngularJs

Tooltip is a tiny popup box that appears when the user hovers his cursor over a specific element. In this tutorial, we are going to use Bootstrap’s tooltip component in our AngularJs application. For this tutorial, we are using UI Bootstrap components.

To integrate Bootstrap Tooltip within your AngularJs application follow the steps given below:

Step 01:

Link Bootstrap Stylesheet file.

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

Step 02:

Load AngularJs and UI Bootstrap files within your application.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.2.min.js"></script>

Step 03:

Include the module within your project by adding ui.bootstrap as a dependency.

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

Step 04:

Now, finally to add the Bootstrap tooltip use uib-tooltip attribute.

<button tooltip-placement="bottom" uib-tooltip="Hello World!">Hover Over!</button>

Useful Read: Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

Resource: https://angular-ui.github.io/bootstrap/

Leave a Comment.