Info-bulles pour les cellules du tableau HTML (pas de Javascript)

Est-il possible d’avoir des info-bulles pour les cellules de tableau sans JavaScript. Je ne peux pas l’utiliser.

as-tu essayé?

 

son bon fonctionnement ici sur Firefox v 18 (Aurora), Internet Explorer 8 et Google Chrome v 23x

Oui. Vous pouvez utiliser l’atsortingbut title sur les éléments de cellule, avec une facilité d’utilisation médiocre, ou vous pouvez utiliser les info-bulles CSS (plusieurs questions existantes, éventuellement des doublons).

La réponse la mieux classée de Mudassar Bashir en utilisant l’atsortingbut “title” semble la manière la plus simple de le faire, mais elle vous donne moins de contrôle sur la façon dont le commentaire / l’info-bulle est affiché.

J’ai trouvé que la réponse de Christophe pour une classe d’info-bulle personnalisée semble donner beaucoup plus de contrôle sur le comportement du commentaire / de l’info-bulle. Étant donné que la démo fournie ne comprend pas de tableau, conformément à la question, voici une démonstration qui comprend un tableau .

Notez que le style “position” de l’élément parent de l’intervalle (a dans ce cas) doit être défini sur “relatif” afin que le commentaire ne contienne pas le contenu de la table lorsqu’il est affiché. Il m’a fallu un peu de temps pour comprendre cela.

 #MyTable{ border-style:solid; border-color:black; border-width:2px } #MyTable td{ border-style:solid; border-color:black; border-width:1px; padding:3px; } .CellWithComment{ position:relative; } .CellComment{ display:none; position:absolute; z-index:100; border:1px; background-color:white; border-style:solid; border-width:1px; border-color:red; padding:3px; color:red; top:20px; left:20px; } .CellWithComment:hover span.CellComment{ display:block; } 
 
Cell 1,2 Has a Comment
Heading 1 Heading 2 Heading 3
Cell 1,1 Cell 1,2 Here is a comment Cell 1,3
Cell 2,1 Cell 2,2 Cell 2,3

Vous pouvez utiliser css et la pseudo-propriété hover. Voici une démo simple . Il utilise le css suivant:

 a span.tooltip {display:none;} a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;} 

Notez que les anciens navigateurs ont un support limité pour: hover.

Une évolution de ce que BioData41 a ajouté …

Placez ce qui suit dans le style CSS

   

Ensuite, utilisez-le comme ceci:

  
Category"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo" Code"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo" Opened Event Severity Id Component Name
Table cell Table cell Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell Table cell Table cell