在悬停时显示 div，仅当前显示（一次一个，而不是一次全部显示）

Question

I am currently using the below:

angular JS:

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

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

Mark-Up:

<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>

• The problem with it; is it shows the tool tips/hovers all at once when you hover over it. I only want to instantiate this over the current item being hovered, so one at a time, instead of all at once, any suggestions? My mark-up above is dynamically included down the page; so I don't want to hover over the first, and have all the below 'tooltip boxes' show, as it is currently. I just want to show the hover of the current one.

Answer 1

Define a variable that value set to false if tooltip was displayed once. In example - tooltipIsNotDisplayed

 angular.module('app', []) .directive('example', example) .directive('popover', popover); function example() { return { templateUrl: 'example.directive.html' } } function popover() { return { restrict: 'A', link: function popover($scope, $elem, $attrs) { $scope.popoverMessage = $attrs.popoverMessage; $elem.addClass('popover'); $elem.append('<div class="popover-message">' + $scope.popoverMessage + '</div>'); } } } angular.bootstrap( document.getElementById('root'), ['app'] );

 body { font-family: sans-serif; } .popover .popover-message { display: none; } .popover:hover .popover-message { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div id="root"> <script type="text/ng-template" id="example.directive.html"> <span popover popover-message="popover message"> text </span> <span popover popover-message="other popover message"> other text </span> </script> <example></example> </div>

Answer 2

Make the popoverIsVisible variable a hash:

$scope.popoverIsVisible = {};

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

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

In the template use it:

 <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>

Answer 3

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

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