Comment puis-je afficher des info-bulles simples sur des icônes en HTML ?
https://stackoverflow.com/questions/59221
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'utilise ActiveScaffold dans une application Ruby on Rails et pour économiser de l'espace dans le tableau, j'ai remplacé le texte "actions" par défaut dans le tableau (c.-à-d."modifier", "supprimer", "afficher") avec des icônes utilisant CSS.J'ai également ajouté quelques actions personnalisées avec action_link.add ("déplacer" et "copier").
Pour plus de clarté, J'aimerais qu'une info-bulle s'affiche avec l'action associée (c'est à dire."modifier", "copier") lorsque je passe la souris sur l'icône.
Je pensais pouvoir le faire en ajoutant une simple définition "alt" à la balise, mais cela ne semble pas fonctionner.
Quelqu'un peut-il m'indiquer la bonne direction ?
La solution
Le alt L'attribut doit être utilisé comme alternative à l'image, dans le cas où l'image est manquante, ou dans un navigateur texte uniquement.
IE s'est trompé quand ils ont fait alt apparaissent sous forme d'info-bulle.Cela n’a jamais été censé être cela.
L'attribut correct pour cela est title, qui bien sûr ne fait pas d'info-bulle dans IE.
Donc, pour qu'une info-bulle apparaisse à la fois dans IE et dans FireFox/Safari/Chrome/Opera, utilisez à la fois un alt attribut et un title attribut.
Autres conseils
Juste un petit point à ajouter à ce fil...il n'y a pas de balise alt ni de balise de titre.L'attribut alt est destiné aux images, mais tous les autres éléments d'une page peuvent avoir un attribut de titre, ce qui constitue le meilleur choix pour la compatibilité entre navigateurs.
<span title="Click here to edit the foo">
Edit
</span>
Vous voulez une balise "titre".Je ne sais plus si cela est nécessaire, mais j'ajoute généralement des balises alt et titre pour m'assurer que tous les navigateurs affichent l'info-bulle de la même manière.
La propriété alt d'une balise img fonctionne dans certains navigateurs, mais pas dans tous (comme certains navigateurs basés sur Mozilla).
Le "La bonne façon" Pour ce faire, il faut utiliser le titre de propriété.
Les info-bulles en HTML sont le contenu du alt texte pour les balises d'image, mais si vous définissez cela en utilisant CSS, vous avez probablement un background:url(...); style au lieu d’une image.
Utiliser alt sur les images et title sur les liens.
Comme Prestaul l'a souligné, la balise alt devrait fonctionner pour les images et le titre pour les liens.Cependant, cela dépend également du navigateur... la plupart des navigateurs devrait implémentez une fonctionnalité qui affiche ces métadonnées sous forme d'info-bulles, mais ils ne sont pas obligés de le faire.
Réalisant, comme l'a souligné Joel Coehoom, que mon icône était en fait une image d'arrière-plan, j'ai créé une image transparente.gif avec les attributs titre et alt au-dessus de l'arrière-plan, et le tour est joué - des info-bulles !
