AngularJS Tooltip using UI Bootstrap tpls HTML Example

By Hardik Savani October 20, 2023 Category : Bootstrap Angular

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:

Read Also: AngularJS Filter Change Date Format in Controller 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>

Tags :
Previous

Laravel Generate Slug from Title Example
Next

Laravel Groupby Having with DB::raw() Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares