javascriptまたはangular jsを使用してリスト内の各アイテムに異なるツールチップを表示するにはどうすればよいですか？

Question

私は画面上のグリッドに表示されるアイテムのリストを持っています。アイテムの上にマウスを置くと、アイテムごとに固有のツールチップが表示されます。 どうすればjavascript、jquery、またはangular jsを使用してそれを達成できますか？おかげさまで

Answer 1

。 HTML

<p ng-repeat = "x in titles" tooltip-placement="top-left" uib-tooltip="{{x.tooltip}}">{{x.title}}</p> 

で

$scope.titles = [ 
    { 
     "id" : 1, 
     "title" : "title1", 
     "tooltip" : "tip1" 
    }, 
    { 
     "id" : 2, 
     "title" : "title2", 
     "tooltip" : "tip2" 
    }, 
    { 
     "id" : 3, 
     "title" : "title3", 
     "tooltip" : "tip3" 
    }, 
    { 
     "id" : 4, 
     "title" : "title4", 
     "tooltip" : "tip4" 
    }, 


    ] 

はplunkerを見てください

の

Answer 2

html属性「title」をアイテムに追加するだけで済みます。 例として、アイテムが順序付きリストであるとします。

<ol> 
    <li title='this is item number one'>Item One</li> 
    <li title='this is the second items'>Item Two</li> 
    <li title='third!'>Item Three</li> 
</ol> 

詳細を表示するには、CSSを使用するだけです。それとも私のために、私は通常私のプロジェクトのためのブートストラップを使用するので、私はちょうどであるブートストラップツールチップを使用して：あなたはangular ui tooltipを使用することができます

<li data-toggle="tooltip" title="This is item no 1!">Item One</li>