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

【问题标题】：How to add a tooltip to the dynamically created SVG element in angualrjs?如何在 angularjs 中为动态创建的 SVG 元素添加工具提示？
【发布时间】：2019-01-21 09:42:59
【问题描述】：

我们需要动态创建的圆圈上的工具提示。一个 svg 圆圈是在页面中自定义创建的，悬停在该工具提示上应该可以工作。
这是sn-p：

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

【问题讨论】：

创建一个子标题元素

标签： angularjs svg tooltip

【解决方案1】：

我会调查ngMouseover。您可以将其应用于包含 SVG 的 span。当鼠标悬停时，您可以显示或隐藏悬停。如果您需要如何在 CSS 中执行此操作的示例，可以查看此CodePen。希望这会有所帮助！

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：