解决同一元素点击与hover触发不同Tooltip重叠显示问题

当然可以搞定这个问题！核心就是要把元素的「点击激活状态」和「鼠标悬停状态」区分开，不让两个Tooltip同时触发。下面给你两种可行的方案，纯CSS和适配你AngularJS场景的JavaScript方案都有：

首先先补全你给出的基础代码（假设你的hover tooltip是用CSS伪元素实现的，点击tooltip是通过类控制的）：

基础代码参考：

<a href="#" class="infoTip showtooltip" tabindex="0" alt="Current Risk Levels" ng-click="mytoolTip()" data-toggle="tooltip" data-placement="top">
  <span class="infoIconTip">My info</span>
</a>

/* 假设的hover tooltip样式 */
.showtooltip:hover::after {
  content: "Hover时显示的Tooltip内容";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 100;
}

/* 点击触发的Tooltip样式（比如自定义或框架生成的） */
.showtooltip.active .click-tooltip {
  display: block;
}

解决步骤：

1. 先修改ng-click，给元素添加/移除激活类：

   <a ... ng-click="mytoolTip(); $event.target.classList.toggle('active')" ...>
   

2. 补充CSS规则，当元素处于激活状态时，隐藏hover的Tooltip：

   /* 点击激活后，隐藏hover触发的Tooltip */
   .showtooltip.active:hover::after {
     display: none;
   }
   
   /* 确保激活状态下的点击Tooltip正常显示 */
   .showtooltip.active .click-tooltip {
     display: block;
   }
   

如果你用的是Bootstrap的Tooltip（从data-toggle="tooltip"能看出来），可以调整CSS来适配：

/* 点击激活后，隐藏Bootstrap的hover Tooltip */
.showtooltip.active:hover + .tooltip {
  display: none !important;
}

因为你用了AngularJS的ng-click，可以通过状态变量精确控制Tooltip的显示：

1. 在控制器里添加状态变量，管理点击状态：

   angular.module('myApp', [])
   .controller('myController', function($scope) {
     $scope.isClickActive = false;
   
     $scope.mytoolTip = function() {
       $scope.isClickActive = !$scope.isClickActive;
       // 手动控制Bootstrap Tooltip的显示/隐藏
       if ($scope.isClickActive) {
         $('.showtooltip').tooltip('show');
       } else {
         $('.showtooltip').tooltip('hide');
       }
     };
   });
   

2. 在HTML里用ng-class绑定激活状态：

   <a href="#" class="infoTip showtooltip" tabindex="0" alt="Current Risk Levels" 
      ng-click="mytoolTip()" 
      ng-class="{'active': isClickActive}"
      data-toggle="tooltip" data-placement="top">
     <span class="infoIconTip">My info</span>
   </a>
   

3. 添加指令监听hover事件，动态禁用/启用hover Tooltip：

   angular.module('myApp').directive('showtooltip', function() {
     return {
       link: function(scope, element) {
         element.on('mouseenter', function() {
           if (scope.isClickActive) {
             // 点击激活时，禁用hover触发的Bootstrap Tooltip
             element.tooltip('disable');
           } else {
             element.tooltip('enable');
           }
         });
   
         element.on('mouseleave', function() {
           if (!scope.isClickActive) {
             element.tooltip('hide');
           }
         });
       }
     };
   });
   

方案选择建议 #

• 纯CSS方案适合简单的自定义Tooltip场景，代码少易维护；
• JS方案更适合用了框架（比如AngularJS、Bootstrap）的复杂场景，能精准控制各种状态。

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