Javascript 悬停时显示div，仅限当前值（一次显示一个div，而不是一次显示所有div）

我目前正在使用以下工具：

角度JS:

$scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

<span class="margin-top-10 display-block">{{doc.pcpText}}
  <span class="bCert" ng-mouseover="showPopover()"
        ng-mouseleave="hidePopover()">Board Certified: 
    <img src="https://www.verycool.website.com/core/images/questionmark.png"
         class="question_mark"> 
    <span class="yes">Yes</span>
  </span>
  <span class="VerC">Verify Certification
  </span>
</span>
<span class="boxShow" ng-show="popoverIsVisible">
  Which board(s) certifies the provider. This information is blah blah blah 
  12 months.
</span>

加价：

$scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

<span class="margin-top-10 display-block">{{doc.pcpText}}
  <span class="bCert" ng-mouseover="showPopover()"
        ng-mouseleave="hidePopover()">Board Certified: 
    <img src="https://www.verycool.website.com/core/images/questionmark.png"
         class="question_mark"> 
    <span class="yes">Yes</span>
  </span>
  <span class="VerC">Verify Certification
  </span>
</span>
<span class="boxShow" ng-show="popoverIsVisible">
  Which board(s) certifies the provider. This information is blah blah blah 
  12 months.
</span>

{{doc.pcpText}
委员会认证：
对
验证认证
哪个委员会认证供应商。这个消息是胡说八道
12个月。

• 它的问题；是否在以下情况下同时显示工具提示/悬停 你在它上面盘旋我只想在当前 项目处于悬停状态，所以一次一个，而不是一次全部，有什么建议吗？ 我上面的标记动态地包含在页面下面；因此，我不想将鼠标悬停在第一个按钮上，让下面所有的“工具提示框”都显示出来，就像现在一样。我只想显示当前一个的悬停

---

定义一个变量，如果工具提示显示一次，则该变量的值设置为false。 在示例中-

工具提示未显示


angular.module（'app'，[]）
.指令（“示例”，示例）
.指令（“popover”，popover）；
函数示例（）{
返回{
templateUrl:'example.directive.html'
}
}
函数popover（）{
返回{
限制：“A”，
链接：函数popover（$scope、$elem、$attrs）{
$scope.popoverMessage=$attrs.poovermessage；
$elem.addClass（'popover'）；
$elem.append（“”+$scope.popoverMessage+“”）；
}
}
}
角自举(
document.getElementById（'root'），['app']
);
正文{
字体系列：无衬线；
}
.popover.popover消息{
显示：无；
}
.popover:hover.popover消息{
显示：块；
}

文本
其他文本
将
popoverIsVisible
变量设置为散列：

$scope.popoverIsVisible = {};

$scope.showPopover = function(id) {
  $scope.popoverIsVisible[id] = true; 
};

$scope.hidePopover = function (id) {
  $scope.popoverIsVisible[id] = false;
};

在模板中使用它：

 <span class="bCert" ng-mouseover="showPopover('info1')"
       ng-mouseleave="hidePopover('info1)">Board Certified: 
    <img src="https://www.verycool.website.com/core/images/questionmark.png"
         class="question_mark"> 
    <span class="yes">Yes</span>
 </span>
 <span class="boxShow" ng-show="popoverIsVisible.info1">
  Which board(s) certifies the provider. This information is blah blah blah 12 months.
</span>

 <span class="bCert" ng-mouseover="showPopover('otherInfo')"
       ng-mouseleave="hidePopover('otherInfo')">Other content
 </span>
 <span class="boxShow" ng-show="popoverIsVisible.otherInfo">
  Other  blah blah blah 12 months.
</span>

董事会认证：
对
哪个委员会认证供应商。这个信息是胡说八道的12个月。
其他内容
其他的废话废话12个月。
我希望它是连续的。。。不仅在第一次悬停时工作？我的问题是我有多个这样的工具提示，我不希望它们都在第一个工具提示的悬停处“显示”。我更改了代码。尝试使用
popover
指令。您可以根据需要制作样式。