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

Question

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

<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 中看到我的圈子，但没有工具提示。任何帮助将不胜感激。

Answer 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 () {
})

;

Answer 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

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

How to get a tooltip over an svg circle using AngularJS?

javascript

svg

twitter-bootstrap

angularjs

angular-ui-bootstrap