Tooltip bootstrap sur header d'un tableau ng-table (angularjs)
Bonjour,
J'utilise ng-table pour créer un tableau à partir de données gérées par angularJS. Dans le header, pour certaines colonnes de ce tableau, on a une image avec un point d'interrogation avec un tooltip. Je défini pour cela un header Template.
Voici un exemple du code:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<script type="text/ng-template" id="tableheader">
<tr class="ng-scope">
<th ng-repeat="column in $columns"
ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
'sort-desc': params.sorting()[parse(column.sortable)]=='desc'
}"
ng-click="sortBy(column, $event)"
ng-show="column.show(this)"
ng-init="template = column.headerTemplateURL(this)"
class="header {{column.class}}">
<div ng-if="!template" ng-show="!template">
{{parse(column.title)}}
<img ng-if="getTooltip(parse(column.title))!=''" title="{{getTooltip(parse(column.title))}}" src="img/flag/info-table.png" style="width: 15px" />
</div>
<div ng-if="template" ng-show="template"><div ng-include="template"></div></div>
</th>
</tr>
<tr ng-show="show_filter" class="ng-table-filters ng-scope">
<th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
<div ng-repeat="(name, filter) in column.filter">
<div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL">
<div ng-include="column.filterTemplateURL">
</div>
</div>
<div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL">
<div ng-include="'ng-table/filters/' + filter + '.html'">
<input name="false" class="input-filter form-control ng-pristine ng-untouched ng-valid ng-scope ng-empty" type="text" ng-model="params.filter()[name]" ng-if="filter=='text'">
</div>
</div>
</div>
</th>
</tr>
</script>
<div class="row" >
<table ng-table="myTable" show-filter="true" class="tab_v4 border bgcolor_darkblue" export-csv="csv" ng-show="displayMyTable()" template-header="tableheader">
<tr ng-repeat="oneData in $data" class="myClass"
ng-click="click(oneData)">
<td data-title="'Column1'" sortable="'col1'" filter="{ 'col1': 'text' }">{{oneData.col1}}</td>
<td data-title="'Column2'" sortable="'col2'" filter="{ 'col2': 'text' }">{{oneData.col2}}</td>
</tr>
</table>
</div> |
Le problème est que les tooltips sont classiques alors que je voudrais des tooltips avec bootstrap comme indiqués ici: http://www.tutorialrepublic.com/twit...p-tooltips.php .
J'ai essayé en mettant ceci:
Code:
1
2
3
4
5
6
|
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script> |
puis ceci:
Code:
1
2
3
4
|
angular.element(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
}); |
mais j'ai le même résultat: une erreur car le html avec les images n'a pas encore été généré par angularJS (l'appel au ready() est fait avant que mes données soient récupérées par ma ressource.
J'ai alors essayé une autre solution que j'ai trouvé en utilisant l'attribut tooltip sur la colonne:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<script type="text/ng-template" id="tableheader">
<tr class="ng-scope">
<th ng-repeat="column in $columns"
ng-class="{
'sortable': parse(column.sortable),
'sort-asc': params.sorting()[parse(column.sortable)]=='asc',
'sort-desc': params.sorting()[parse(column.sortable)]=='desc'
}"
ng-click="sortBy(column, $event)"
ng-show="column.show(this)"
ng-init="template = column.headerTemplateURL(this)"
class="header {{column.class}}"
tooltip="{{getTooltip(parse(column.title))}}">
<div ng-if="!template" ng-show="!template">
{{parse(column.title)}}
<img ng-if="getTooltip(parse(column.title))!=''" src="img/flag/info-table.png" style="width: 15px" />
</div>
<div ng-if="template" ng-show="template"><div ng-include="template"></div></div>
</th>
</tr>
<tr ng-show="show_filter" class="ng-table-filters ng-scope">
<th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter">
<div ng-repeat="(name, filter) in column.filter">
<div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL">
<div ng-include="column.filterTemplateURL">
</div>
</div>
<div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL">
<div ng-include="'ng-table/filters/' + filter + '.html'">
<input name="false" class="input-filter form-control ng-pristine ng-untouched ng-valid ng-scope ng-empty" type="text" ng-model="params.filter()[name]" ng-if="filter=='text'">
</div>
</div>
</div>
</th>
</tr>
</script> |
Ici, le problème est que quand je vais sur la case avec le nom de colonne, le tooltip est bien affiché mais il ajoute une colonne après ce qui décale tout...
En débug, je vois qu'il y a un div qui vient s'ajouter dans le html entre mes th.
Exemple::
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<th>
...
</th>
<div title="" class="tooltip top fade" style="left: 675.9px; top: 388.29px; display: block;" content="tooltip test" is-open="isOpen" ng-class="{ in: isOpen(), fade: animation() }" animation="animation" placement="top" tooltip-popup="">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner ng-binding" ng-bind="content">tooltip test</div>
</div>
<th>
...
</th> |
Je ne comprend pas. Pouvez-vous m'aider svp?
Merci d'avance.
