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