Tooltip dans un tableau

**naroco** · 18/11/2013, 12h34

Bonjour
j'extrait de ma SGBD un certain nombre d'infos.
Je ne souhaite pas afficher une donnée en dur dans mon tableau car le nombre de caratères est volumineux.
Je souhaite donc faire afficher cette info sous forme de tooltip quand je clique sur un certain champ.
j'espère être assez clair dans mon explication.
Mon souci est le suivant : le tooltip s'affiche correctement pour mon premier enregistrement (première ligne de mon tableau) mais pas pour les lignes suivantes.

J'ai essayé de creuser mais je ne vois vraiment pas où est mon souci. Je dois peut être utiliser EACH dans ma fonction js ???

Voici mon code

Code css :

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

1
2
3
.tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;} 
.tooltip p{margin:0;text-align:justify;} 
#tooltip_3{background:#fff;border-color:#8c6;}

Code :

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

1
2
3
4
5
6
$(function(){ 
    $("a.tooltiplink").simpletooltip(); 
    $("a.clic").simpletooltip({click: true}); 
    $("a.delay").simpletooltip({hideDelay: 0.5}); 
    $("#demo_5").simpletooltip({ click: true }); 
});

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div  align="center">
	<table id="myTable" class='tablo'>
		<tr>
			<th class="th">UO</th>
			<th class="th">code</th>
			<th class="th">Nom</th>
			<th class="th">Age</th>
			<th class="th">GFP</th>
			<th class="th">xx/yy/zz</th>
			<th class="th">Site</th>
			<th class="th">Pr&eacute;sent</br>Absent</th>
			<th class="th">Motif</th>
			<th class="th">Commentaire</th>
			<th class="th">Coeff.</th>
			<th class="th">NBH Pr&eacute;sence</th>
			<th class="th">handicap</th>
			<th class="th">Astreinte</th>
			<th class="th">ID Date</th>
			<th class="th">ID Date Pepsi</th>
			<th class="th">ID Lettre</th>
			<th class="th">Mouvement</br>Pr&eacute;vu</th>
			<th class="th">Date</th>
			<th class="th">Commentaire</th>
		</tr>
		<label ><font color="#FF9900">D&eacute;part Autre</font> - <font color="red">D&eacute;part IVD</font> - <font color="blue">Arriv&eacute;es Pr&eacute;vues</font></label>
 
		 <?php 
        for($i=0;$i<count($donnees);$i++) 
        { ?> 
        <tr <?php if($donnees[$i]['ivd_date']!=null){ ?> class="essai1" <?php }  
                  if($donnees[$i]['mouvtP_nat']!=null AND $donnees[$i]['mouvtP_nat']!='D1'){ ?> class="essai2" <?php } ?>  > 
            <td align="left" class="tddum"><?php echo $donnees[$i]['uo']; ?></td> 
            <td align="center" class="tddum"><a href="#" id="" onclick="ficheagent('<?php echo $donnees[$i]['code'];?>','<?php echo $donnees[$i]['nom'];?>')" ><?php echo $donnees[$i]['nni']; ?> </a></td> 
            <td align="left" class="tddum" ><?php echo $donnees[$i]['nom']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['age']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['gfp']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['xx']."/".$donnees[$i]['yy']."/".$donnees[$i]['zz']; ?></td> 
            <td align="left" class="tddum"><?php echo $donnees[$i]['comtrav']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['presence'];?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['motabs']; ?></td> 
            <td align="center" class="tddum"><a id="demo_5" href="#tooltip_1"> <?php if($donnees[$i]['rev_commentaire']!=null){echo 'OUI';} ?></a></td> 
            <td align="center" class="tddum"><?php echo number_format($donnees[$i]['txpres'],1,',','.'); ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['nbhpres']; ?></td> 
            <td align="left" class="tddum"><?php echo $donnees[$i]['handicap']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['ast']; ?></td> 
            <td align="center" class="tddum"><?php  if($donnees[$i]['date_ceg']!='0000-00-00') {echo strftime('%d-%m-%Y', strtotime($donnees[$i]['date_ceg']));} ?></td> 
            <td align="center" class="tddum"><?php if($donnees[$i]['id_date']!=null){echo strftime('%d-%m-%Y', strtotime($donnees[$i]['id_date']));}?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['id_lettre']; ?></td> 
            <td align="center" class="tddum"><?php echo $donnees[$i]['mouvtP_nat']; ?></td> 
            <td align="center" class="tddum"><?php if($donnees[$i]['mouvtP_date']!=null){echo strftime('%d-%m-%Y', strtotime( $donnees[$i]['mouvtP_date']));} ?></td> 
            <div style="display:none"  id="tooltip_1" class="tooltip"> 
                <h2><?php echo $donnees[$i]['nom'];?></h2> 
                <p><?php echo $donnees[$i]['rev_commentaire'];?></p> 
            </div> 
        </tr>  
		<?php                                   
                }       
                ?>	
</table>
</div>