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

Question

我目前正在使用以下内容：

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

• 它的问题; 当您将鼠标悬停在它上面时，它是否会立即显示工具提示/悬停。我只想在当前悬停的项目上实例化它，所以一次一个，而不是一次，有什么建议吗？我上面的标记是动态包含在页面下方的；所以我不想将鼠标悬停在第一个上，并像目前一样显示下面的所有“工具提示框”。我只想显示当前悬停。

标签： javascriptangularjs

Answer 1

如果工具提示显示一次，则定义一个将值设置为 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>