How to do tooltip info message in angularjs

17 hours ago 4

ARTICLE AD BOX

I am trying to show the info message when we click the button. But it is not working in AngularJS.

When I click the button nothing will happening. I am not getting any error, but it is not working.

How to fix this issue?

Demo: https://stackblitz.com/edit/angular-js-dwpgmb5n?file=index.html

Below is the code:

index.html:

<!DOCTYPE html> <html ng-app="appModule"> <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-csp.css" /> </head> <body>  <div ng-controller="TooltipController"> <button type="button" class="btn btn-primary" tooltip-template="'clickTooltip.html'" tooltip-trigger="'none'" tooltip-is-open="tooltipOpen" tooltip-placement="bottom" tooltip-append-to-body="true" tooltip-enable="true" ng-click="toggleTooltip($event)" > Click me for info </button> </div> <script type="text/ng-template" id="clickTooltip.html"> <div class="click-tooltip"> <h4>{{ title }}</h4> <p>{{ content }}</p> <button class="btn btn-xs btn-default" ng-click="closeTooltip()">Close</button> </div> </script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>  <script src="bundle.js"></script> </body> </html>

index.js:

import angular from 'angular'; // Create the module first const app = angular.module('appModule', ['ui.bootstrap']); // Define the controller on the module app.controller('TooltipController', [ '$scope', '$document', '$timeout', function ($scope, $document, $timeout) { $scope.tooltipOpen = false; $scope.title = 'Important Information'; $scope.content = 'This tooltip appears on click and stays open until closed.'; $scope.toggleTooltip = function ($event) { $event.stopPropagation(); $event.preventDefault(); $scope.tooltipOpen = !$scope.tooltipOpen; }; $scope.closeTooltip = function () { $scope.tooltipOpen = false; // Apply the change $scope.$apply(); }; }, ]);