Discussion :

[philou44300]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});
</script>

puis ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Invité]

Et avec le module https://angular-ui.github.io/bootstrap/

Tooltip (ui.bootstrap.tooltip) ?

[philou44300]

Bonjour,
C'est justement ca que j'ai essayé d'utiliser à la fin et qui m'ajoute ceci entre mes th:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<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>

PS: la version qui est déjà incluse dans le projet est une ancienne (ui-bootstrap-tpls-0.12.0.js) et j'y retrouve mon div pour template/tooltip/tooltip-popup.html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
angular.module("template/tooltip/tooltip-popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tooltip/tooltip-popup.html",
    "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"tooltip-arrow\"></div>\n" +
    "  <div class=\"tooltip-inner\" ng-bind=\"content\"></div>\n" +
    "</div>\n" +
    "");
}]);