如何使用 AngularJS 在 svg 圆圈上获得工具提示？答案

【问题标题】：How to get a tooltip over an svg circle using AngularJS?如何使用 AngularJS 在 svg 圆圈上获得工具提示？
【发布时间】：2017-01-08 19:16:19
【问题描述】：

我正在构建一个页面，我正在使用简单的 AngularJS 和 svg 绘制一些圆圈。我希望在用户将鼠标悬停在圆圈上时显示工具提示。我读了here 如何做到这一点，但它对我不起作用。这是我的代码：

<circle ng-repeat="node in slowQueriesCtrl.nodes"
              ng-attr-cx="{{node.x}}"
              ng-attr-cy="{{node.y}}"
              ng-attr-r= "{{node.r}}"
              tooltip="Hello World"
              tooltip-append-to-body="true"
              tooltip-placement="right"
              stroke="green"
              stroke-width="3"
              fill="green">
</circle>

我可以看到我的圈子出现在 UI 中，但没有工具提示。任何帮助将不胜感激。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap svg angular-ui-bootstrap

【解决方案1】：

你可以试试这个

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TooltipDemoCtrl">
    <svg>
      <circle cx="60" cy="60" r="50" tooltip-append-to-body="true" tooltip-placement="right" uib-tooltip="Hellow World">
      </circle>
    </svg>
  </div>
</body>

</html>

和

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function () {
})

;

【讨论】：

这段代码有效，但它没有使用 ui-bootstrap 工具提示指令
请检查您的文件版本 - ui-bootstrap。 angularjs等..？控制台中的任何错误？我创建了一个 plunker，工作演示。 link

【解决方案2】：

从 0.14.0 版开始，所有父指令的名称都带有 uib- 前缀，因此指令的名称应为 uib-tooltip 而不是 tooltip。

正如@ciril sebastian 所注意到的，您忘记用svg 元素包装您的circle 元素。

<svg>
    <circle ng-repeat="node in slowQueriesCtrl.nodes"
        ng-attr-cx="{{node.x}}"
        ng-attr-cy="{{node.y}}"
        ng-attr-r= "{{node.r}}"
        uib-tooltip="Hello World"
        tooltip-append-to-body="true"
        tooltip-placement="right"
        stroke="green"
        stroke-width="3"
        fill="green">
    </circle>
</svg>

Here's a working plunk

【讨论】：

这项工作谢谢。能否请您帮我处理多行 uib-tooltip，我尝试了 uib-tooltip-html-unsafe 但它不起作用。