2016-05-09 6 views
3

tooltipを入れようとしています。tdの中にあり、機能しません。私はそれが明確ではないことを知っているが、ここで私は<td>を持っていることをそのマウスの各項目にホバーしたいときは<td>toolipがあります。私のコードは以下の通りです。 null結果のためにng-ifを使用しています。私は空の列を表示したくありません。Ng-repeat内のツールチップ

<table class="table table-bordered" > 
<thead><tr class="infoti" > 
<th>Id Dev</th> 
<th>Nom Dev </th> 
<th>Nom Ecu</th> 
<th>Etat</th> 
<th>Action</th> 
<tr> 
</thead> 
<tbody>  
<tr dir-paginate=" dev in devs | itemsPerPage:7 "> 

<td >{{dev.id}}</td> 
<td>{{dev.nomdev}}</td> 
<td >{{dev.ecu.nomEcu}}</td>  
<td ng-if="dev.validationdvd[0].etatvalid == 'Validé' "><a href="" data-toggle="tooltip" title="Some tooltip text!">Validé </a> 

</td> 
<td ng-if="dev.validationdvd[0].etatvalid != 'Validé' ">Non Validé</td>     

<td> 
<button class="btn btn-gray" ng-click="displaydata(dev.id)" data-toggle="modal" data-target="#myModal" >Validé</button> 
</td> 
</tr> 
</tbody> 
</table> 
<div class="tooltip top" role="tooltip"> 
<div class="tooltip-arrow"></div> 
<div class="tooltip-inner"> 
{{dev.id}} 
</div> 
</div> 

私はそれがNGリピート外で働いていた。このようにツールチップを初期化しますが、私はそれを任意の指導のための

<script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

感謝を述べたどのように動作しません!

+0

なぜUI、ブートストラップのツールチップを使用していないのに役立ちます願っていますか。? –

+0

それは遅すぎるかもしれませんが、次のプロジェクトではそれを使用していただきありがとうございます –

答えて

0

私はあなたがディレクティブを作成する必要がまず、解決策を見つけた検索した後:

myApp.directive('tooltip', function() { 
return { 
    restrict:'A', 
    link: function(scope, element, attrs) 
    { 
     $(element) 
      .attr('title',scope.$eval(attrs.tooltip)) 
      .tooltip({placement: "right"}); 
    } 
} 
}) 

このように、それはより多くのだから、あなたはあなたが私は私のコードのコードを貼り付けていなかったツールチップに表示する内容を指定誰もがそれを使用することができるように、最終的にはあなたはそれがこの

<li ng-repeat="item in items" > 
     <a rel="tooltip" tooltip="item.whatever_you_want_to_display_inside_the_tool_tip">{{your Displayed item}}</a> 

ようなHTMLで使う一般的には、それはあなたが

関連する問題