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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] Implémenter un tool-tip en JavaScript

Cherrytree

cn=?

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 :

function ToolTip(sText) {
this.sText = sText;
}
ToolTip.prototype.show = function(e) {
var oSpan = document.getElementById("toolTip" );
oSpan.innerHTML = this.sText;
oSpan.style.left = (e.clientX + 5) + "px";
oSpan.style.top = (e.clientY + 5) + "px";
oSpan.style.display = "inline";
};
ToolTip.prototype.hide = function(e) {
var oSpan = document.getElementById("toolTip" );
oSpan.style.display = "none";
};

Fichier toolTip.html

Code :

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="tooltip.js" />
</head>
<body>
<p>
Hello
<span
onmousemove="var oWorldToolTip = new ToolTip('Hey guys, this is neat!');
oWorldToolTip.show(event);"
onmouseout="var oWorldToolTip = new ToolTip('Hey guys, this is neat!');
oWorldToolTip.hide(event);"
>World!</span>
</p>
<span id="toolTip" style="border: 1px solid #F00; display: none; position: absolute;" />
</body>
</html>

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

Publicité

gatsu35

Blablaté par Harko

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

Cherrytree

cn=?

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 :

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
function show(e, sLabel) {
var oSpan = document.getElementById("tooltip" );
oSpan.innerHTML = sLabel;
oSpan.style.left = (e.clientX + 5) + "px";
oSpan.style.top = (e.clientY + 5) + "px";
oSpan.style.display = "inline";
}
function hide(e) {
var oSpan = document.getElementById("tooltip" );
oSpan.style.display = "none";
}
</script>
<p>Hello, <span onmouseover="show(event, 'Yes!');" onmousemove="show(event, 'Yes!');" onmouseout="hide(event);">world</span>!</p>
<span id="tooltip" style="background-color: #FCC; border: 1px solid red; display: none; position: absolute;">Yes!</span>
</body>
</html>

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

gatsu35

Blablaté par Harko

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

Cherrytree

cn=?

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 :

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

Il préfère

Code :

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

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

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

gatsu35

Blablaté par Harko

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

Message cité 1 fois

Harkonnen

Modérateur
Un modo pour les bannir tous

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)

Cherrytree

cn=?

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

Harkonnen

Modérateur
Un modo pour les bannir tous

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)

gatsu35

Blablaté par Harko

Harkonnen a écrit :

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[JavaScript] Problème avec mon Cookie	javascript:history.back et image
[javascript] infos utilisation d'activex	javascript dans flash
javascript: tableau à partir d'un string	test javascript avec onclick="..."
[js]get et javascript	Détection du type de média en javascript
[HTML/CSS/Javascript] Select et onchange	[HTML/CSS/Javascript] "popup" dans une page
Plus de sujets relatifs à : [JS] Implémenter un tool-tip en JavaScript

Page générée en 0.095 secondes