基于AngularJS与Bootstrap Tooltip实现悬停点击切换两个提示框

嘿，我来帮你搞定这个双提示框的问题！你遇到的鼠标离开后提示框不隐藏、点击后悬停提示框还显示的问题，本质是两个提示框的状态逻辑没有做好隔离和互斥。咱们用状态变量来清晰控制每个提示框的显示，就能完美解决啦。

核心思路 #

用两个布尔变量分别控制悬停提示框（showHoverTooltip）和点击提示框（showClickTooltip）的显示状态，同时处理事件之间的互斥逻辑：

• 悬停时，只有点击提示框没显示，才触发悬停提示
• 点击时，强制隐藏悬停提示，切换点击提示的显示状态
• 鼠标离开时，直接隐藏悬停提示

完整代码实现 #

HTML部分 #

<a href="#" class="infoTip" tabindex="0"
   ng-mouseover="vm.showHoverTooltip = !vm.showClickTooltip"
   ng-mouseleave="vm.showHoverTooltip = false"
   ng-click="vm.toggleClickTooltip($event)">
  你的锚点文本
  <!-- 悬停提示框 -->
  <div class="hover-tooltip" ng-show="vm.showHoverTooltip">
    这是悬停时显示的提示内容
  </div>
  <!-- 点击提示框 -->
  <div class="click-tooltip" ng-show="vm.showClickTooltip">
    这是点击后显示的提示内容
  </div>
</a>

AngularJS控制器部分 #

// 假设你的控制器用了vm（Controller As语法）
angular.module('yourApp').controller('YourController', function() {
  var vm = this;

  // 初始化两个提示框的状态
  vm.showHoverTooltip = false;
  vm.showClickTooltip = false;

  // 处理点击事件：切换点击提示框，强制隐藏悬停提示
  vm.toggleClickTooltip = function($event) {
    // 阻止锚点默认跳转行为
    $event.preventDefault();
    // 阻止事件冒泡（避免点击后触发document层面的关闭逻辑）
    $event.stopPropagation();
    
    // 切换点击提示框的显示状态
    vm.showClickTooltip = !vm.showClickTooltip;
    // 强制隐藏悬停提示框，不管鼠标是否还在锚点上
    vm.showHoverTooltip = false;
  };

  // 可选：点击页面其他区域关闭点击提示框
  angular.element(document).on('click', function() {
    if (vm.showClickTooltip) {
      vm.showClickTooltip = false;
      // 因为是外部DOM事件，需要手动触发Angular的脏检查
      vm.$apply();
    }
  });
});

关键逻辑解释 #

1. 悬停事件处理：ng-mouseover里判断!vm.showClickTooltip，确保只有点击提示框没显示时，悬停提示才会出现，避免两个提示框同时展示。
2. 鼠标离开处理：直接把showHoverTooltip设为false，解决之前无法隐藏的问题——之前的问题大概率是原函数里没有正确重置状态，用变量控制更直观可靠。
3. 点击事件处理：点击时强制把showHoverTooltip设为false，保证即使鼠标还在锚点上，悬停提示也会立刻消失；同时用preventDefault阻止锚点跳转，stopPropagation避免触发页面其他点击事件。
4. 外部点击关闭：如果需要点击页面其他地方关闭点击提示框，添加document点击事件即可，注意要调用vm.$apply()触发Angular的脏检查，因为外部事件不在Angular的 digest 循环里。

样式参考（可选） #

给提示框加基础样式，确保它们正常显示：

.infoTip {
  position: relative;
  display: inline-block;
}
.hover-tooltip, .click-tooltip {
  position: absolute;
  padding: 8px 12px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  z-index: 100;
}
.hover-tooltip {
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
}
.click-tooltip {
  top: 120%;
  left: 100%;
  margin-left: 8px;
}

这样调整后，你的双提示框就能完美实现：悬停显示第一个、点击显示第二个，鼠标离开悬停提示自动隐藏，点击后即使鼠标还在锚点上，悬停提示也不会再出现啦！

内容的提问来源于stack exchange，提问作者Hema Nandagopal