AngularJSを使用してsvgサークル上でツールチップを取得するにはどうすればよいですか？

私は単純なAngularJSとsvgを使っていくつかの円をプロットしています。ユーザーがマウスをサークル上に置いたときにツールチップが表示されるようにしたい。私はhereこれを行う方法を読むが、私のために働いていない。私のコードは以下の通りです：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に表示されますが、ツールチップは表示されません。どんな助けでも大歓迎です。

出典

2016-09-01 Raghvendra Singh

、すべての親のディレクティブは、その名前にuib-接頭辞を取得し、そのディレクティブの名前はuib-tooltipいうよりtooltipでなければなりません。

@cirilセバスチャンとして気づいたように、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

出典

2016-09-01 05:24:26 svarog

この仕事はありがたいです。また、複数行のuib-tooltipで私を助けてもらえますか？uib-tooltip-html-unsafeを試しましたが動作しません。 –

は 'uib-tooltip-template'を使用します。これはドキュメント内にあります – svarog

あなたはこの

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

を試してみてくださいでした。バージョン0.14.0以降

出典

2016-09-01 04:54:49

このコードは動作しますが、それはUI-ブートストラップツールチップディレクティブ – svarog

を利用しないファイル - UI-ブートストラップのあなたのバージョンを確認してください。 anglejsなど？コンソールにエラーがありますか？私はプランナー、デモを作成しました。 [link]（https://plnkr.co/edit/WeIYtnxTcQphVA6eJX82?p=preview） –

AngularJSを使用してsvgサークル上でツールチップを取得するにはどうすればよいですか？

答えて

関連する問題