5568 sujets

Sémantique web et HTML

[Résolu] : Pb tooltip dynamique avec <table>

Bonjour,

Dans mon script php, j'ai une boucle qui affiche une série de lignes.
Lors du survol de chaque ligne, un tooltip dynamique apparait.
Cela fonctionne sous IE, mais pas Firefox.

Rq : dans ce tooltip ...<em><span></span>, si le contenu n'est pas du type <table> ... </table>, cela fonctionne bien.

Quelqu'un a-t-il déjà été confronté à ce problème ?

Merci.
Modifié par thm51 (28 Aug 2009 - 14:13)
Bonjour,

thm51 a écrit :
Quelqu'un a-t-il déjà été confronté à ce problème ?


Peut-être, mais comme je ne suis pas sûre d'avoir compris le problème en question et que tu ne propose ni code ni page en ligne, je ne me risquerai pas à une réponse plus ferme.
Exact. Autant pour moi. Donc OK sous IE, mais pas sous FireFox :

Code php :

<a href="#" class="tooltip04" >
<img src="images/page_white.png" border="0">
test
<em><span></span>
<table>
<tr>
<td>TEXTE BIDON</td>
</tr>
</table>
</em></a>


code CSS:

a.tooltip04 em {
    display:none;
}
a.tooltip04:hover {
    border: 0;
    position: relative;
    z-index: 501;
    text-decoration:none;
	color:#FF6600;
}
a.tooltip04:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #FF6600;
    background: #FFFFFF;
    width:750px; /* 500 avant */ /* => ORI2 : 732 */
	text-align: left; 
	color:#FF6600;
}

a.tooltip04:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent; /* url("../images/image-infobulle.gif");*/
    background-repeat: no-repeat;
	margin:0;
    padding: 0;
    border: 0;
	color:#FF6600;
}


Merci.
Modifié par thm51 (28 Aug 2009 - 12:02)
Première chose : éditer ton message pour rajouter [ code] et [ /code] autours de tes portions de code.

Seconde chose : produire un code HTML valide (non un a ne peut pas contenir une table).
Bonjour,

Sinon pour ta réponse c'est normal que ça ne marche pas avec <table>

Car comme <table> ne peut-être contenu dans un lien <a> le navigateur interprête cela comme une erreur et met le tableau après le lien. Donc c'est comme si tu avais ça

<a>...</a>
<table>...</table>


Donc ton script ne peut pas marcher.

Essaye avec

<div class="tooltip04">
   <img .. />
   <table>...</table>
</div>


Enfin en même temps je ne connais pas ton javascript...
Modifié par masseuro (28 Aug 2009 - 12:06)
Merci, Laurie-Anne, de ta réponse.

Si la balise <a> ne peut pas contenir <table>, que me conseilles tu pour remplacer ce formatage dans mon tooltip ?

Connais tu un site exhaustif qui détaille la balise <a> sur lequel j'aurais vu que <table> était interdit ?

Merci.
Merci Massero.

Je ne peux pas utiliser <div> à la place de <a>, car une autre action est déclenchée sur le lien.

"comme <table> ne peut-être contenu dans un lien <a> le navigateur interprête cela comme une erreur et met le tableau après le lien."
=> IE fonctionne bien
=> et Firefox l'interprête bien sur quelques lignes aléatoirement.
Si la balise <a> ne peut pas contenir <table>, que me conseilles tu pour remplacer ce formatage dans mon tooltip ?
J'ai trouvé !!

Merci de m'avoir mis sur la piste en disant : la balise <a> ne peut pas contenir <table>

Après recherches, je suis tombé sur : http://joliclic.free.fr/html/object-tag/

Donc mon script fonctionne en faisant : 

<a .....>
<em><span></span>
<object><table>
......
</table></object>


Merci à vous tous.
Waaah, cette solution gagne le prix du bricolage de la semaine.

Le problème, c'est que placer le contenu de ton tooltip dans un élément A (en jouant sur un OBJECT ou non pour rendre ça valide) est, en général, illogique. Ton tooltip ne fait pas partie de l'intitulé du lien, c'est une information périphérique que tu donnes. La seule raison pour laquelle tu insères ce contenu dans le A, c'est pour pouvoir réaliser un effet en CSS en utilisant la pseudo-classe :hover de manière compatible avec IE6.

La bonne solution serait:
1. Une structure HTML plus pertinente. Le mieux pour cela est d'envisager le contenu du tooltip comme un contenu qui, à la base, va s'afficher directement dans la page. Donc, côté balisage, ça peut donner un titre de section (Hn) suivi d'un DIV contenant des paragraphes, des images, un tableau de données, etc. À voir en fonction du contenu.
2. Ensuite, on utilise JavaScript pour: a) masquer le bloc que l'on veut afficher comme tooltip, b) éventuellement adapter la mise en page en ajoutant une classe spécifique à la volée sur certains éléments et en déclinant les styles CSS, c) afficher et masquer le bloc de tooltip en réaction à des évènements (survol, focus, etc.).

Bien sûr, ça demande plus de boulot (pour un résultat heureusement meilleur) que de détourner l'élément A de sa fonction. Smiley cligne
Modifié par Florent V. (28 Aug 2009 - 15:00)
Sujet clos
Aller à