Question

我正在构建一个页面，我正在使用简单的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>

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

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注意到，您忘了用circle元素包裹svg元素。

<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圈子上获得工具提示？

2 个答案: