Share
Les info-bulles sont relativement simples à mettre en œuvre. Il suffit d'ajouter un peu de balisage à votre code HTML et d'utiliser un peu de CSS. Cependant, si vous n'avez jamais entendu parler d'attributs de données HTML5, vous pouvez essayer cette approche alternative (et beaucoup plus propre)..
Si vous avez suivi la série des barres d’administration, ce screencast devrait bien finir les choses. Si vous n'ont pas suivi, ne vous inquiétez pas; Ce screencast va vous apprendre quelque chose que vous pouvez utiliser dans toutes sortes de situations. Nous allons examiner quelques options pour que nos infobulles soient opérationnelles..
Si, pour une raison folle, vous préférez ne pas me regarder montrer des démonstrations, voici quelques extraits à emporter et avec lesquels vous pouvez jouer. Remarque: il s'agit d'exemples simplifiés - vous pouvez éventuellement ajouter des préfixes de navigateur, des styles supplémentaires, etc..
Le premier exemple utilise un balisage supplémentaire sous la forme d'un au sein de notre ancre. Cela fonctionne très bien, nous permet d'ajouter un "point" décoratif à notre info-bulle et constitue actuellement l'option la plus sûre en ce qui concerne la compatibilité du navigateur..
HTML:
Accentsconagua
Voici le lienc'est la pointe! CSS:
a.tooltip span taille de la police: 10px; position: absolue; z-index: 999; espace blanc: maintenant; en bas: 9999px; à gauche: 50%; arrière-plan: # 000; couleur: # e0e0e0; remplissage: 0px 7px; hauteur de ligne: 24px; hauteur: 24px; opacité: 0; transition: opacité 0,4 s relâchement; a.tooltip span :: before content: ""; bloc de visualisation; border-left: 6px solid # 000000; border-top: 6px solid transparent; position: absolue; en haut: -6px; gauche: 0px; a.tooltip: hover span opacity: 1; en bas: -35px;
Voici l'exemple qui nettoie notre balisage, utilise le HTML5 attribut de données tenir la valeur de notre infobulle, et le css ::avant pseudo-élément pour l'afficher. Beaucoup plus propre.
HTML:
Voici le lien
CSS:
a.tooltip :: before content: attr (data-tip); taille de police: 10px; position: absolue; z-index: 999; espace blanc: maintenant; en bas: 9999px; à gauche: 50%; arrière-plan: # 000; couleur: # e0e0e0; remplissage: 0px 7px; hauteur de ligne: 24px; hauteur: 24px; opacité: 0; transition: opacité 0,4 s relâchement; a.tooltip: hover :: before opacity: 1; en bas: -35px;
