Показывать div при наведении, только текущий (по одному, не все сразу)

Question

Я сейчас использую ниже:

угловой 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>

• проблема с этим; это показывает подсказки инструмента / парит все сразу, когда ты паришь над этим Я хочу создать экземпляр только для текущего элемент находится, так что по одному, вместо всех сразу, какие-либо предложения? Моя наценка выше динамически включена вниз страницы; поэтому я не хочу наводить курсор мыши над первым и показывать все нижеприведенные «всплывающие окна», как это происходит в настоящее время. Я просто хочу показать наведение текущего.

Answer 1

Сделать переменную 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>

Answer 2

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

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

Answer 3

Определите переменную, для которой установлено значение false, если всплывающая подсказка отображалась один раз. В примере - 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>