[JS] Implémenter un tool-tip en JavaScript

Implémenter un tool-tip en JavaScript [JS] - HTML/CSS - Programmation

Marsh Posté le 13-04-2006 à 14:13:04    

Bonjour à tous,

 

Je cherche à implémenter une fonctionnalité de tool-tip en JavaScript. J'ai implémenté ça comme ça. Ce n'est pas très satisfaisant mais c'est un début. Mon problème c'est que sous IE6 rien ne s'affiche et je n'ai pas d'erreurs. Avez-vous une idée ?

 

Fichier toolTip.js

 
Code :
  1. function ToolTip(sText) {
  2.     this.sText = sText;
  3. }
  5. ToolTip.prototype.show = function(e) {
  6.     var oSpan = document.getElementById("toolTip" );
  7.     oSpan.innerHTML = this.sText;
  8.     oSpan.style.left = (e.clientX + 5) + "px";
  9.     oSpan.style.top = (e.clientY + 5) + "px";
  10.     oSpan.style.display = "inline";
  11. };
  13. ToolTip.prototype.hide = function(e) {
  14.     var oSpan = document.getElementById("toolTip" );
  15.     oSpan.style.display = "none";
  16. };


Fichier toolTip.html

 
Code :
  1. <!DOCTYPE html PUBLIC
  2.         "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.         <title>Untitled Document</title>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.         <script type="text/javascript" src="tooltip.js" />
  9.     </head>
  11.     <body>
  12.         <p>
  13.             Hello
  14.             <span
  15.                 onmousemove="var oWorldToolTip = new ToolTip('Hey guys, this is neat!');
  16.                              oWorldToolTip.show(event);"
  17.                 onmouseout="var oWorldToolTip = new ToolTip('Hey guys, this is neat!');
  18.                             oWorldToolTip.hide(event);"
  19.             >World!</span>
  20.         </p>
  21.         <span id="toolTip" style="border: 1px solid #F00; display: none; position: absolute;" />
  22.     </body>
  23. </html>
 



---------------
Le site de ma maman
Reply

Marsh Posté le 13-04-2006 à 14:13:04   

Reply

Marsh Posté le 13-04-2006 à 14:25:26    

parque sous IE la gestion des events n'est pas la même sinon essaye et regarde comment a été codé sweetTitles, il est très bien codé
 
http://www.dustindiaz.com/sweet-titles-finalized/


Message édité par gatsu35 le 13-04-2006 à 14:25:40
Reply

Marsh Posté le 13-04-2006 à 17:11:34    

Je viens de regarder, c'est sympa comme tout cette effet de fondu et ça me plait bien. Apparemment le fonctionnement tient à la décoration de l'attribut title d'une ancre, quoique maintenant que je re-regarde, je n'en suis plus si sûr. A vrai dire je cherche plutôt quelque chose de plus terre à terre, dans un premier temps, qui me permette de mettre d'importe quoi dans mon info-bulle, avec suivi du curseur.
 
D'autre part j'ai ce code, qui est assez similaire à mon premier et qui marche sous IE et je ne m'explique pas que celui-ci marche et pas l'autre.
 

Code :
  1. <!DOCTYPE html PUBLIC
  2.  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.  <title>Untitled Document</title>
  7.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. </head>
  10. <body>
  11.  <script type="text/javascript">
  12. function show(e, sLabel) {
  13. var oSpan = document.getElementById("tooltip" );
  15. oSpan.innerHTML = sLabel;
  17. oSpan.style.left = (e.clientX + 5) + "px";
  18. oSpan.style.top = (e.clientY + 5) + "px";
  19. oSpan.style.display = "inline";
  20. }
  22. function hide(e) {
  23. var oSpan = document.getElementById("tooltip" );
  24. oSpan.style.display = "none";
  25. }
  26.  </script>
  27.  <p>Hello, <span onmouseover="show(event, 'Yes!');" onmousemove="show(event, 'Yes!');" onmouseout="hide(event);">world</span>!</p>
  28.  <span id="tooltip" style="background-color: #FCC; border: 1px solid red; display: none; position: absolute;">Yes!</span>
  29. </body>
  30. </html>


---------------
Le site de ma maman
Reply

Marsh Posté le 13-04-2006 à 17:15:37    

J'ai dit examine mieux sweetTitles :o les evenement ne sont pas gérés pareil

Reply

Marsh Posté le 13-04-2006 à 17:22:54    

OK [:jap]
 
Sinon pour mon problème, je viens de trouver, et ce n'est pas une question d'événements.
 
Apparemment IE a un problème avec

Code :
  1. <script type="text/javascript" src="tooltip.js" />


Il préfère

Code :
  1. <script type="text/javascript" src="tooltip.js"></script>


 
Problème résolu donc, et merci pour les infos.


---------------
Le site de ma maman
Reply

Marsh Posté le 13-04-2006 à 17:27:49    

script est une double balise :/
et non une balise simple :/
toi revoir bases JS

Message cité 1 fois
Reply

Marsh Posté le 13-04-2006 à 17:35:17    

cherrytree :love: :hello:
 

gatsu35 a écrit :

script est une double balise :/
et non une balise simple :/
toi revoir bases JS


parle pas comme ça à mon ex boolay, et à l'inspirateur du topic blabla@prog toi [:antp]

Message cité 1 fois

---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 14-04-2006 à 17:20:45    

Harkonnen a écrit :

cherrytree :love: :hello:
 
 
parle pas comme ça à mon ex boolay, et à l'inspirateur du topic blabla@prog toi [:antp]


Salut Harko ! C'est gentil de prendre ma défense.
 
Plus généralement, et pour réagir sur la remarque de Gatsu, avec lequel je suis plutôt d'accord, il me paraît important de pointer du doigt, s'il en était encore besoin, la difficulté de concevoir des applications Web. Multiplicité des langages, des technologies, des techniques, des frameworks. Il devient extrêmement ardu d'être expert, d'autant que le coût d'entretien des connaissances, des acquis devient plus lourd au fur et à mesure que l'on densifie son savoir. Les langages évoluent, les techniques et les frameworks aussi. Restent finalement les concepts qui évoluent peu, mais remettent potentiellement en cause un pan entier du savoir du développeur, bon à jeter. Ceci est affaire de point de vue, évidemment, mais personnellement je me sens dépassé devant le contexte.


---------------
Le site de ma maman
Reply

Marsh Posté le 14-04-2006 à 17:22:25    

Je ne peux que plussoyer, c'est d'ailleurs une des raisons qui fait que la prog web ne m'a jamais intéressé : trop de trucs, de technos, de buzzwords, etc... Pour ce qui n'est finalement que de la mise en page

Message cité 1 fois

---------------
J'ai un string dans l'array (Paris Hilton)
Reply

Marsh Posté le 14-04-2006 à 17:32:16    

Harkonnen a écrit :

Je ne peux que plussoyer, c'est d'ailleurs une des raisons qui fait que la prog web ne m'a jamais intéressé : trop de trucs, de technos, de buzzwords, etc... Pour ce qui n'est finalement que de la mise en page


étant donné que tu es une merde en interface, cela est évident que le web n'est pas fait pour toi :D

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed