fonction javascript infobulle texte complet

**ramijrad** · 22/02/2011, 09h28

Bonjour,
je suis en train de réaliser une application web, l'un des pages contient un tableau, chaque [ligne,colonne] de tableau contient des textes, chaque texte peut etre assez long donc je veux que la taille de tableau reste standard mais lorsque je passe la souris sur chaque [ligne,colonne] je dois visualiser la totalité de texte.
savez-vous une fonction java-script qui permet de le faire.
merci d'avance

**padawan31** · 22/02/2011, 12h24

Une fonction javascript qui te fait tout je sais pas si ça existe.. mais bon tu peux envisager une solution "maison" pour résoudre ton problème.

Par exemple pourquoi ne pas stocker les informations dans des champs cachés, ensuite lorsque la souris survole une case tu récupère le bon texte (gestion avec des id pour pas se tromper) et tu le glisse dans une info bulle créer pour l'occasion. En plus je suis certain qu'il existe des script ou plug-in qui crée des info bulle très simplement et que tu trouveras sur le net.

Allez courage !

**SpaceFrog** · 22/02/2011, 12h39

un petit exemple de ce qu'il est possible de faire

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<head>
<style type="text/css">
html, body {height:100%;}
.tdcontent{height:20px; width:150px;overflow:hidden;}
#info {display:none;
position: absolute;
text-align:justify;
top:2em;
background-color:#EBFC8D;
padding:5px;
border: solid 1px red;
width:300px;
z-index:2;
}
</style>
<script type='text/javascript'>
function infobulle(obj){
moninfo=document.getElementById('info')
moninfo.innerHTML=obj.innerHTML
moninfo.style.display="block";
obj.appendChild(moninfo)
obj.onmouseout=function(){moninfo.style.display="none";}
}
</script>
</head>
<body>
<div id="info"></div>
<table>
<tr>
<td ><div class="tdcontent" onmouseover="infobulle(this);" >Phasellus justo ipsum, euismod sit amet interdum eget, aliquet at sem. In hac habitasse platea dictumst. Donec placerat; purus non consectetur varius, dui nibh lacinia nulla, vitae iaculis nisi nulla a augue. Pellentesque at quam et lorem tempor sagittis a ac felis. Donec lacinia, augue non ultricies tristique, libero lacus cursus elit, a viverra libero mi ac arcu. Donec eu massa ut nulla mollis euismod. Pellentesque laoreet justo ac nunc egestas bibendum in quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus libero nisi, commodo nec aliquet eget, lobortis nec metus. Nunc turpis augue, ornare sed sagittis id, egestas id sem. Sed semper porttitor odio, nec malesuada eros egestas ut. Nulla sagittis nulla sit amet est blandit fringilla. Praesent auctor diam in quam dignissim bibendum. Sed nisl enim, faucibus a molestie eget, mollis eget leo. Ut pellentesque posuere ligula, sed elementum dolor blandit sit amet. Ut condimentum mauris eget nisl egestas interdum. Pellentesque vestibulum vestibulum varius.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi diam, auctor vel semper sed, dictum at tellus. Proin tincidunt odio et ante cursus et lobortis dolor malesuada. Suspendisse nec tellus turpis; non suscipit massa. Nam nisl felis, posuere sit amet semper eget, viverra a neque. Donec sodales, diam nec faucibus auctor, justo metus pretium odio, id cursus augue justo nec purus. Suspendisse egestas tellus eget lorem ultricies pharetra. Nam iaculis; quam eu malesuada fermentum, quam erat placerat ante, ut mollis risus nunc in ligula. Quisque libero tortor, feugiat vel dictum in, iaculis eu tellus. Vivamus mattis, leo sit amet dictum ullamcorper, ante arcu ultrices enim, eget semper magna elit ut dui. Nulla sed aliquam augue! In eget orci ac nisi vulputate ultricies sit amet eu lorem. Vestibulum malesuada sem vel ligula vestibulum sit amet bibendum dui auctor. Pellentesque eu purus tortor; ut mattis sapien. Nam rutrum nisl nec enim vehicula sodales.
Morbi elit est, aliquet vel pretium at, ullamcorper et dolor. Pellentesque vel augue lacus. Donec eleifend sem sit amet libero tincidunt molestie. Cras accumsan augue nec sem eleifend sagittis. Pellentesque ornare interdum nisi a semper. Quisque adipiscing convallis augue id porta. Curabitur eget arcu velit, nec volutpat nulla. Praesent molestie risus nec felis convallis ut vulputate libero bibendum? Aenean sit amet congue turpis! Donec a blandit turpis. Aenean accumsan tellus eu purus porta vel malesuada metus tempus.
</div></td>
<td><div class="tdcontent" onmouseover="infobulle(this);" >Phasellus justo ipsum, euismod sit amet interdum eget, aliquet at sem. In hac habitasse platea dictumst. Donec placerat; purus non consectetur varius, dui nibh lacinia nulla, vitae iaculis nisi nulla a augue. Pellentesque at quam et lorem tempor sagittis a ac felis. Donec lacinia, augue non ultricies tristique, libero lacus cursus elit, a viverra libero mi ac arcu. Donec eu massa ut nulla mollis euismod. Pellentesque laoreet justo ac nunc egestas bibendum in quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus libero nisi, commodo nec aliquet eget, lobortis nec metus. Nunc turpis augue, ornare sed sagittis id, egestas id sem. Sed semper porttitor odio, nec malesuada eros egestas ut. Nulla sagittis nulla sit amet est blandit fringilla. Praesent auctor diam in quam dignissim bibendum. Sed nisl enim, faucibus a molestie eget, mollis eget leo. Ut pellentesque posuere ligula, sed elementum dolor blandit sit amet. Ut condimentum mauris eget nisl egestas interdum. Pellentesque vestibulum vestibulum varius.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi diam, auctor vel semper sed, dictum at tellus. Proin tincidunt odio et ante cursus et lobortis dolor malesuada. Suspendisse nec tellus turpis; non suscipit massa. Nam nisl felis, posuere sit amet semper eget, viverra a neque. Donec sodales, diam nec faucibus auctor, justo metus pretium odio, id cursus augue justo nec purus. Suspendisse egestas tellus eget lorem ultricies pharetra. Nam iaculis; quam eu malesuada fermentum, quam erat placerat ante, ut mollis risus nunc in ligula. Quisque libero tortor, feugiat vel dictum in, iaculis eu tellus. Vivamus mattis, leo sit amet dictum ullamcorper, ante arcu ultrices enim, eget semper magna elit ut dui. Nulla sed aliquam augue! In eget orci ac nisi vulputate ultricies sit amet eu lorem. Vestibulum malesuada sem vel ligula vestibulum sit amet bibendum dui auctor. Pellentesque eu purus tortor; ut mattis sapien. Nam rutrum nisl nec enim vehicula sodales.
Morbi elit est, aliquet vel pretium at, ullamcorper et dolor. Pellentesque vel augue lacus. Donec eleifend sem sit amet libero tincidunt molestie. Cras accumsan augue nec sem eleifend sagittis. Pellentesque ornare interdum nisi a semper. Quisque adipiscing convallis augue id porta. Curabitur eget arcu velit, nec volutpat nulla. Praesent molestie risus nec felis convallis ut vulputate libero bibendum? Aenean sit amet congue turpis! Donec a blandit turpis. Aenean accumsan tellus eu purus porta vel malesuada metus tempus.
</div></td>
<td><div class="tdcontent" onmouseover="infobulle(this)" >Phasellus justo ipsum, euismod sit amet interdum eget, aliquet at sem. In hac habitasse platea dictumst. Donec placerat; purus non consectetur varius, dui nibh lacinia nulla, vitae iaculis nisi nulla a augue. Pellentesque at quam et lorem tempor sagittis a ac felis. Donec lacinia, augue non ultricies tristique, libero lacus cursus elit, a viverra libero mi ac arcu. Donec eu massa ut nulla mollis euismod. Pellentesque laoreet justo ac nunc egestas bibendum in quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus libero nisi, commodo nec aliquet eget, lobortis nec metus. Nunc turpis augue, ornare sed sagittis id, egestas id sem. Sed semper porttitor odio, nec malesuada eros egestas ut. Nulla sagittis nulla sit amet est blandit fringilla. Praesent auctor diam in quam dignissim bibendum. Sed nisl enim, faucibus a molestie eget, mollis eget leo. Ut pellentesque posuere ligula, sed elementum dolor blandit sit amet. Ut condimentum mauris eget nisl egestas interdum. Pellentesque vestibulum vestibulum varius.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi diam, auctor vel semper sed, dictum at tellus. Proin tincidunt odio et ante cursus et lobortis dolor malesuada. Suspendisse nec tellus turpis; non suscipit massa. Nam nisl felis, posuere sit amet semper eget, viverra a neque. Donec sodales, diam nec faucibus auctor, justo metus pretium odio, id cursus augue justo nec purus. Suspendisse egestas tellus eget lorem ultricies pharetra. Nam iaculis; quam eu malesuada fermentum, quam erat placerat ante, ut mollis risus nunc in ligula. Quisque libero tortor, feugiat vel dictum in, iaculis eu tellus. Vivamus mattis, leo sit amet dictum ullamcorper, ante arcu ultrices enim, eget semper magna elit ut dui. Nulla sed aliquam augue! In eget orci ac nisi vulputate ultricies sit amet eu lorem. Vestibulum malesuada sem vel ligula vestibulum sit amet bibendum dui auctor. Pellentesque eu purus tortor; ut mattis sapien. Nam rutrum nisl nec enim vehicula sodales.
Morbi elit est, aliquet vel pretium at, ullamcorper et dolor. Pellentesque vel augue lacus. Donec eleifend sem sit amet libero tincidunt molestie. Cras accumsan augue nec sem eleifend sagittis. Pellentesque ornare interdum nisi a semper. Quisque adipiscing convallis augue id porta. Curabitur eget arcu velit, nec volutpat nulla. Praesent molestie risus nec felis convallis ut vulputate libero bibendum? Aenean sit amet congue turpis! Donec a blandit turpis. Aenean accumsan tellus eu purus porta vel malesuada metus tempus.
</div></td>
<td><div class="tdcontent" onmouseover="infobulle(this)" >Phasellus justo ipsum, euismod sit amet interdum eget, aliquet at sem. In hac habitasse platea dictumst. Donec placerat; purus non consectetur varius, dui nibh lacinia nulla, vitae iaculis nisi nulla a augue. Pellentesque at quam et lorem tempor sagittis a ac felis. Donec lacinia, augue non ultricies tristique, libero lacus cursus elit, a viverra libero mi ac arcu. Donec eu massa ut nulla mollis euismod. Pellentesque laoreet justo ac nunc egestas bibendum in quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus libero nisi, commodo nec aliquet eget, lobortis nec metus. Nunc turpis augue, ornare sed sagittis id, egestas id sem. Sed semper porttitor odio, nec malesuada eros egestas ut. Nulla sagittis nulla sit amet est blandit fringilla. Praesent auctor diam in quam dignissim bibendum. Sed nisl enim, faucibus a molestie eget, mollis eget leo. Ut pellentesque posuere ligula, sed elementum dolor blandit sit amet. Ut condimentum mauris eget nisl egestas interdum. Pellentesque vestibulum vestibulum varius.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi diam, auctor vel semper sed, dictum at tellus. Proin tincidunt odio et ante cursus et lobortis dolor malesuada. Suspendisse nec tellus turpis; non suscipit massa. Nam nisl felis, posuere sit amet semper eget, viverra a neque. Donec sodales, diam nec faucibus auctor, justo metus pretium odio, id cursus augue justo nec purus. Suspendisse egestas tellus eget lorem ultricies pharetra. Nam iaculis; quam eu malesuada fermentum, quam erat placerat ante, ut mollis risus nunc in ligula. Quisque libero tortor, feugiat vel dictum in, iaculis eu tellus. Vivamus mattis, leo sit amet dictum ullamcorper, ante arcu ultrices enim, eget semper magna elit ut dui. Nulla sed aliquam augue! In eget orci ac nisi vulputate ultricies sit amet eu lorem. Vestibulum malesuada sem vel ligula vestibulum sit amet bibendum dui auctor. Pellentesque eu purus tortor; ut mattis sapien. Nam rutrum nisl nec enim vehicula sodales.
Morbi elit est, aliquet vel pretium at, ullamcorper et dolor. Pellentesque vel augue lacus. Donec eleifend sem sit amet libero tincidunt molestie. Cras accumsan augue nec sem eleifend sagittis. Pellentesque ornare interdum nisi a semper. Quisque adipiscing convallis augue id porta. Curabitur eget arcu velit, nec volutpat nulla. Praesent molestie risus nec felis convallis ut vulputate libero bibendum? Aenean sit amet congue turpis! Donec a blandit turpis. Aenean accumsan tellus eu purus porta vel malesuada metus tempus.
</div></td>
<td><div class="tdcontent" onmouseover="infobulle(this)" >Phasellus justo ipsum, euismod sit amet interdum eget, aliquet at sem. In hac habitasse platea dictumst. Donec placerat; purus non consectetur varius, dui nibh lacinia nulla, vitae iaculis nisi nulla a augue. Pellentesque at quam et lorem tempor sagittis a ac felis. Donec lacinia, augue non ultricies tristique, libero lacus cursus elit, a viverra libero mi ac arcu. Donec eu massa ut nulla mollis euismod. Pellentesque laoreet justo ac nunc egestas bibendum in quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus libero nisi, commodo nec aliquet eget, lobortis nec metus. Nunc turpis augue, ornare sed sagittis id, egestas id sem. Sed semper porttitor odio, nec malesuada eros egestas ut. Nulla sagittis nulla sit amet est blandit fringilla. Praesent auctor diam in quam dignissim bibendum. Sed nisl enim, faucibus a molestie eget, mollis eget leo. Ut pellentesque posuere ligula, sed elementum dolor blandit sit amet. Ut condimentum mauris eget nisl egestas interdum. Pellentesque vestibulum vestibulum varius.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi diam, auctor vel semper sed, dictum at tellus. Proin tincidunt odio et ante cursus et lobortis dolor malesuada. Suspendisse nec tellus turpis; non suscipit massa. Nam nisl felis, posuere sit amet semper eget, viverra a neque. Donec sodales, diam nec faucibus auctor, justo metus pretium odio, id cursus augue justo nec purus. Suspendisse egestas tellus eget lorem ultricies pharetra. Nam iaculis; quam eu malesuada fermentum, quam erat placerat ante, ut mollis risus nunc in ligula. Quisque libero tortor, feugiat vel dictum in, iaculis eu tellus. Vivamus mattis, leo sit amet dictum ullamcorper, ante arcu ultrices enim, eget semper magna elit ut dui. Nulla sed aliquam augue! In eget orci ac nisi vulputate ultricies sit amet eu lorem. Vestibulum malesuada sem vel ligula vestibulum sit amet bibendum dui auctor. Pellentesque eu purus tortor; ut mattis sapien. Nam rutrum nisl nec enim vehicula sodales.
Morbi elit est, aliquet vel pretium at, ullamcorper et dolor. Pellentesque vel augue lacus. Donec eleifend sem sit amet libero tincidunt molestie. Cras accumsan augue nec sem eleifend sagittis. Pellentesque ornare interdum nisi a semper. Quisque adipiscing convallis augue id porta. Curabitur eget arcu velit, nec volutpat nulla. Praesent molestie risus nec felis convallis ut vulputate libero bibendum? Aenean sit amet congue turpis! Donec a blandit turpis. Aenean accumsan tellus eu purus porta vel malesuada metus tempus.
</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

**ramijrad** · 22/02/2011, 14h44

merci pour les réponses , en fait le texte est affiché dans le tableau mais pas la totalité de texte donc je veux que la totalité de texte s'affiche lorsque je passe la souris sur la zone de texte donc la fonction infobulle ne répond pas à mon besoin , si vous pouvez m'indiquer d'autres propositions

**javatwister** · 22/02/2011, 19h20

la fonction infobulle ne répond pas à mon besoin

en quoi???

SpaceFrog te propose d'afficher le contenu de ton td dans un div "volant";

**NoSmoking** · 22/02/2011, 19h43

Envoyé par ramijrad

donc je veux que la taille de tableau reste standard mais lorsque je passe la souris sur chaque [ligne,colonne] je dois visualiser la totalité de texte.

compte tenu des contraintes données ci dessus "l'info bulle" est toute indiquée, autre alternative, diminuer la taille de la police jusqu'a ce que tout soit visible...je sens que cela va être fun!!!

fonction javascript infobulle texte complet

JavaScript

Discussions similaires

Partager

Partager