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>

问题所在；它是否同时显示所有工具提示/悬停您将鼠标悬停在它上面。 我只想在当前实例化此实例项目被悬停，因此一次提出，而不是一次提出任何建议？我在上方的标记动态地包含在页面下方；因此，我不想将鼠标悬停在上方，并显示下面的所有“工具提示框”，就像现在一样。我只想显示当前窗口的悬停。

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>

Answer 2

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

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

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

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

3 个答案: