在AngularJS中如何实现工具提示信息？

前端开发 2026-07-12

我正在尝试在点击按钮时显示信息提示。但在AngularJS中它不起作用。

当我点击按钮时，似乎没有任何反应。我没有看到任何错误信息，但它确实不起作用。

如何解决这个问题？

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

下面是代码：

index.html:

 <!DOCTYPE html>
<html ng-app="appModule">
  <head>
    <!-- Add required CSS and JS dependencies -->
    <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>
    <!-- Button with click tooltip -->
    <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>

    <!-- Include required JavaScript libraries -->
    <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>
    <!-- Your compiled JavaScript bundle -->
    <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();
    }; 
  },
]);

解决方案

请不要在AngularJS使用Stackblitz，因为它会产生编译错误。改为使用Stack Overflow的编辑器，它们工作得很好。

修复方法是属性应该为 uib-tooltip-template，而不是 tooltip-template。

<button
    type="button"
    class="btn btn-primary"
    uib-tooltip-template="'clickTooltip.html'"

Angular UI Bootstrap Tooltip文档

// 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();
    };
  },
]);

<!DOCTYPE html>
<html ng-app="appModule">

<head>
  <!-- Add required CSS and JS dependencies -->
  <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>
  <!-- Button with click tooltip -->
  <div ng-controller="TooltipController">
    <button
        type="button"
        class="btn btn-primary"
        uib-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>

  <!-- Include required JavaScript libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <!-- Your compiled JavaScript bundle -->
</body>

</html>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。