Question

我们需要动态创建的圆上的工具提示。在页面中自定义创建了一个svg圈子，将鼠标悬停在该工具提示上即可。
这是代码段：

<td ng-if="fldc.selected && fldc.itemStatus != undefined">
  <span ng-if="fldc.itemStatus">
    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
    </svg>
  </span>
  <span ng-if="!fldc.itemStatus">
    <svg class="checkmark1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
    <circle class="checkmark__circle1" cx="26" cy="26" r="25" fill1="none" />
    <path class="checkmark__check1" fill1="none" d="M16 16 36 36 M36 16 16 36" />
    </svg>
  </span>
</td>

Answer 1

我会研究ngMouseover。您可以将其应用于包含SVG的span。鼠标悬停时，可以显示或隐藏悬停。如果需要使用CSS的示例，可以查看此CodePen。希望这会有所帮助！

Answer 2

基本上，您需要向svg元素ng-mouseenter和ng-mouseleave添加2条指令，这些指令映射到控制器和工具提示容器中的方法。然后，您将$ event传递给适当的方法，添加一些CSS属性和一个活动类。这是一个工作示例：

App = angular
  .module('app', [])
  .controller('MainController', MainController);
  
function MainController($scope, $element){
  const ttElem = angular.element($element[0].querySelector('.tooltip'));
  $scope.showTooltip = function(event){
    ttElem.css('left', event.pageX + 'px');
    ttElem.css('top', event.pageY + 'px');
    ttElem.html('Content Here');
    ttElem.addClass('active');
  }
  
  $scope.removeTooltip = () => {
    ttElem.removeClass('active');
  }
}

.tooltip {
    pointer-events: none;
    position: absolute;
    font-size: 18px;
    text-align: center;
    background: white;
    padding: 10px 15px;
    z-index: 1;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    color: #21669e;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #eee;
    display: none;
}

.tooltip.active {
    display: block;
    border: 1px solid lightgray;
    white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainController">
    <svg>
      <g class="toolfaces">
        <circle class="lg" ng-mousemove="showTooltip($event)" ng-mouseleave="removeTooltip($event)" cx="50" cy="50" r="40" fill="red"/>
      </g>
    </svg>
  <div class="tooltip"></div>
</div>

Answer 3

正如罗伯特所说。如果您对简单的工具提示感到满意，只需使用<title>元素。这些与HTML中title="..."属性的SVG等效

svg {
  width: 100px;
}

<td ng-if="fldc.selected && fldc.itemStatus != undefined">
  <span ng-if="fldc.itemStatus">
    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="black"/>
    <path class="checkmark__check" stroke="limegreen" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
    <title>Yes!</title>
    </svg>
  </span>
  <span ng-if="!fldc.itemStatus">
    <svg class="checkmark1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="margin: 1px;">
    <circle class="checkmark__circle1" cx="26" cy="26" r="25" fill="black" />
    <path class="checkmark__check1" stroke="limegreen" d="M16 16 36 36 M36 16 16 36" />
    <title>No!</title>
    </svg>
  </span>
</td>

如何在angualrjs中为动态创建的SVG元素添加工具提示？

3 个答案: