[résolu] Infobulles personnalisable dans un <td>

Bonjour j'aimerai savoir comment en CSS je pourrais personnaliser l'infobulle générer avec l'attribut title dans ma balise <td> ?
Modifié par Biouzor (28 Apr 2009 - 12:02)

Salut,

on ne peut pas : le rendu dépend du navigateur.

Il faut passer par JavaScript...

Mhh pourtant j'ai trouvé quelques scripts pouvant le faire sans javascript, mais que sur des balises liens <a ... >.

Euh... sans JS je suppose que tu veux parler d'un élément en display:none qui est transformé en display:block sur le :hover de l'élément conteneur ?

Auquel cas il ne s'agit pas de l'attribut title...

Ou bien d'attributs propriétaires disponibles uniquement pour quelques navigateurs ?
Modifié par Heyoan (24 Apr 2009 - 11:27)

Oui des hover, des block avec des <span>, pas tout compris en fait mais apparemment ça fonctionne que avec des liens mais je ne suis pas sûr, ou si on peut adapter pour des <td>

Et oui on utilise plus title dans ce que j'ai vu mais des <span>text bulle </span>
Mais je n'ai pas encore eu le temps de bien regarder.
Modifié par Biouzor (24 Apr 2009 - 11:31)

Bonjour,

:hover fonctionnera sur toutes les balises HTML, donc les TD aussi.

Mais, IE6 ne sais pas intrpréter hover pour les autres éléments que a.

Donc une solution à base de :hover et de span cachée (qui devra être développée en faisant bien attention à son accessibilité) fonctionnera, saus pour IE6.

Ok, je me pencherai dessus après le week-end et je reviendrai vous dire quoi !

Bonjour, j'ai partiellement résolu mon problème (ça marche nikel sous IE mais pas sur Firefox :s) :

Mon code CSS :

td.infoTacheSemaine {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* on souligne le texte */
}
td.infoTacheSemaine span {
   display: none; /* on masque l'infobulle */
}
td.infoTacheSemaine:hover {
   background: none; /* correction d'un bug IE */
   z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

   cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
td.infoTacheSemaine:hover span {
   display: inline; /* on affiche l'infobulle */
   position: absolute;

   white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

   top: 30px; /* on positionne notre infobulle */
   left: 20px;

   background: white;

   color: teal;
   padding: 3px;

   border: 1px solid teal;
   border-left: 4px solid teal;
}

Mon code HTML :

<td class="infoTacheSemaine" >Mon texte dans ma case<span>Mon Texte dans ma bulle</span></td>

Sous IE l'infobulle apparait correctement, sous firefox le seul truk qui apparait c'est le changement de curseur (cursor: help;) mais pas de bulle .

Quelqu'un pourrait me dire pourquoi ça ne fonctionne pas sur firefox ?

Biouzor a écrit :
Quelqu'un pourrait me dire pourquoi ça ne fonctionne pas sur firefox ?

Aucune raison si le reste de ta page est valide (doctype, etc...) et qu'il n'y a pas d'autres déclarations css qui gènent.
Modifié par Heyoan (27 Apr 2009 - 11:57)

Je vois vraiment pas ce qui pourrait gêner, c'est vraiment énervant de voir que ça fonctionne parfaitement sur IE et pas du tout sur firefox.

On ne le répètera jamais assez : c'est bien une page en ligne (ou à défaut tout le code -html et css- permettant de reproduire le problème) !

Et si je change tout et que je décide finalement de faire ça en javascript, je risque d'avoir le même problème au final ou pas ?

(ayant plus de 300 lignes de CSS dans toute ma page CSS et plus de 600 lignes dans la page php en question je vais pas tout vous mettre)
Modifié par Biouzor (27 Apr 2009 - 15:08)

J'ai finalement décidé de faire ça avec du javascript mais cette fois-ci, ça marche parfaitement sur firefox mais ça bug un peu sur IE, ça affiche ce qui doit être dans ma bulle sur ma page à l'endroit de mon <div></div> ça ne crée pas la bulle et ne suit pas le curseur (contrairement à Firefox ou cette fois ça marche impec')

Code javascript :

function GetId(id)
				{
					return document.getElementById(id);
				}
				var i=false; // La variable i nous dit si la bulle est visible ou non

				function move(e) 
				{
					if(i) 
					{  // Si la bulle est visible, on calcul en temps reel sa position ideale
						if (navigator.appName!="Microsoft Internet Explorer") 
						{ // Si on est pas sous IE*/
							GetId("curseur").style.left=e.pageX + 5+"px";
							GetId("curseur").style.top=e.pageY + 10+"px";
						}
						else 
						{
							if(document.documentElement.clientWidth>0) 
							{
								GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
								GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
							} 
							else 
							{
								GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
								GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
							}
						}  
					}
				}

				function montre(text) 
				{
					if(i==false) 
					{
						GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
						GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
						i=true;
					}
				}

				function cache() 
				{
					if(i==true) 
					{
						GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
						i=false;
					}
				}
				
				document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle

Code CSS (simple) :

.infobulle
{
    position: absolute;   
    visibility : hidden;
    border: 1px solid Black;
    padding: 10px;
    font-family: Verdana, Arial;
    font-size: 10px;
    background-color: #FFFFCC;
}

Code HTML :
De la bulle :

<div id="curseur" class="infobulle"></div>

Dans mes <td> :

<td onmouseover="montre('Texte de ma bulle');" onmouseout="cache();">Texte de ma case</td>

Quelqu'un aurait une idée du pourquoi cette fois ça marche pas comme il faut sur IE ? ^^
Modifié par Biouzor (28 Apr 2009 - 09:21)

J'ai finalement résolu mon problème, j'avais encore mon infobulle qui apparaissait en arrière plan par rapport au tableau sur IE mais c'est arrangé, à cause de certaines lignes de code CSS gênant. Et j'ai opté pour le choix du javascript, au moins on a le même résultat sur tous les navigateurs et on peut bouger la bulle en fonction du curseur .