Il est peu probable que les gourous de la mise en page trouvent quelque chose de nouveau dans cet article. Cet article s'adresse davantage aux concepteurs de mise en page débutants qui, comme moi, ont eu des problèmes pour créer et styliser des info-bulles universelles.
Récemment, lorsque je créais un petit blog, j'ai été confronté à la tâche de créer des info-bulles à la fois élégantes et simples. Après avoir essayé différentes manières de créer des conteneurs div séparés pour les info-bulles ou de créer des info-bulles avec du CSS pur, j'ai trouvé une solution universelle qui n'encombrera pas le code, sera compatible avec tous les navigateurs et en même temps sera très simple à mettre en œuvre.
Quiconque est intéressé par ma méthode pour résoudre ce problème simple, je demande sous cat.
Lien vers les info-bulles
Comme vous l'avez peut-être déjà remarqué dans la liste, j'utilise le préprocesseur LESS CSS.
Nous avons inclus les styles et scripts CSS dans des fichiers séparés. Nous avons également un lien et un bloc div, qui sera le conteneur de l'info-bulle.
La spécification HTML5 permet l'utilisation d'attributs personnalisés de type data-attribute, qui peuvent stocker certaines informations sur un élément ou un bloc. C'est dans les attributs des données que nous enregistrerons le texte des infobulles.
Lien
Pour le stockage, j'utilise l'attribut data-tooltip.
Nous en avons fini avec HTML - nous pouvons passer aux styles. CSS J'utilise la bibliothèque LESS Elements et je la recommande à tout le monde, je vais donc écrire quelques propriétés en utilisant ce framework.
@import "css/elements.less"; #tooltip ( z-index : 9999 ; position : absolue ; affichage : aucun ; haut : 0px ; gauche : 0px ; couleur d'arrière-plan : #000 ; remplissage : 5px 10px 5px 10px ; couleur : blanc ; .opacity(0.5); . arrondi(5px); )
D'après la liste, il est clair que dans la première ligne, nous connectons LE, définissons le bloc div#tooltip sur un positionnement absolu et le masquons. Ensuite, nous donnons au bloc une couleur d'arrière-plan et une couleur de texte, arrondissons les coins (5px) et définissons la valeur de transparence à 50%. jQuery Vient maintenant la partie amusante - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Fin prête.
Maintenant, nous ajoutons tous les éléments avec l'attribut data-tooltip à la sélection et, lorsque nous survolons l'élément souhaité avec la souris, nous obtenons la valeur de l'info-bulle et la stockons dans une variable. Ensuite, nous ajoutons le texte de l'astuce au bloc #tooltip, lui donnons les coordonnées du curseur à partir du bord de la page + 5 px et enfin affichons le bloc avec l'info-bulle au bon endroit. Une fois que la souris quitte l'élément, nous masquons le bloc #tooltip, effaçons son contenu et le remettons à 0;0;.
C'est tout!
En conséquence, nous obtiendrons quelque chose comme ceci : Démo
Grâce à ce script simple, tous les éléments de la page qui possèdent l'attribut data-tooltip recevront une info-bulle.
Merci pour votre attention!
Dans cet article, je souhaite discuter de plusieurs options pour organiser une telle fonctionnalité dans n'importe quelle mise en page. D'ailleurs, j'ai déjà un exemple vivant d'une telle mise en œuvre sur mon site Web. Si vous faites défiler jusqu'aux commentaires sur cette page et survolez la date du commentaire, vous comprendrez immédiatement exactement ce qui est dit. Eh bien, s'il n'y a pas encore de commentaires, vous pouvez en laisser un en même temps.
Je vois deux méthodes principales pour implémenter une info-bulle, celle en survol, qui est également la plus populaire, et la moins populaire lorsque vous cliquez sur un élément. Commençons naturellement par l'apparition d'une info-bulle lorsque vous survolez un élément.
Dans cet article, j'ai pensé commencer par la chose la plus primitive, afficher un indice en utilisant title , qui ne peut en aucun cas être formaté, mais je pense que vous pouvez l'ignorer, car c'est déjà clair. Si ce qui précède n'est pas tout à fait clair pour vous, je pense qu'après avoir étudié la vidéo, tout deviendra beaucoup plus clair.
Une manière simple avec le design, en survol.Ce n'est pas plus compliqué que la méthode qui m'a manqué. Seulement au lieu de l'attribut title, j'utiliserai data-title et design en utilisant des styles CSS. En fait, je donne ci-dessous le code html :
?
/* Nous utilisons le pseudo-élément after pour concevoir la barre elle-même, mais en même temps nous le masquons, car il ne doit apparaître qu'au survol */ .hover:after (content: attr(data-title); display: none ;position : absolue ; bas : 130 % ; gauche : 0px ; couleur d'arrière-plan : #fff ; couleur : #3aaeda ; remplissage : 5px ; alignement du texte : centre ; -moz-box-shadow : 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow : 0 1px 1px rgba(0,0,0,.16); box-shadow : 0 1px 1px rgba(0,0,0,.16);police -size: 12px;) / * Ajouter une propriété pour que lorsque vous survolez un élément, une boîte d'indice apparaisse */ .hover:hover:after(display: block;)
Ici, je voudrais attirer votre attention sur le fait qu'il ne s'agit que d'un exemple de propriétés de conception. Vous pouvez naturellement concevoir l’apparence du dé à votre guise.
Info-bulle au survol.C'est peut-être la manière la plus populaire d'implémenter cette fonctionnalité. C'est du moins ce que j'utilise le plus souvent.
? c'est une astuce de conception
Dans cet exemple, je ne vois rien de spécial non plus, mais plus, mais le résultat sera meilleur même sans utiliser l'attribut data-title. Le conteneur dans ce cas sert de wrapper pour nos éléments qui seront utilisés pour implémenter l'info-bulle. Et la matrice elle-même sera également positionnée par rapport au conteneur.
/* définit le positionnement relatif du conteneur */ .block(position:relative;) /* Concevoir l'élément caché par défaut */ .hidden (affichage : aucun ; position : absolue ; bas : 130 % ; gauche : 0px ; couleur d'arrière-plan : # fff ; couleur : #3aaeda ; remplissage : 5 px ; alignement du texte : centre ; -moz-box-shadow : 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow : 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Décoration supplémentaire pour l'élément caché (facultatif) */ .hover + .hidden:before (contenu : " " ; position : absolue ; haut : 98 % ; gauche : 10 % ; marge gauche : -5px ; largeur de bordure : 5px ; style de bordure : solide ; hauteur : 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;) /* Décoration supplémentaire pour l'élément caché (facultatif) * / .hover + .hidden :after (contenu : " " ; position : absolue ; haut : 100 % ; gauche : 10 % ; marge gauche : -5px ; largeur de bordure : 5px ; style de bordure : solide ; hauteur : 0 ;largeur : 0 ; bordure : 7px solide transparente ; bordure droite : 7px solide #fff ; couleur de la bordure : rgba(0,0,0,.16) transparent transparent transparent ; z-index: 1;) /* Apparition d'un élément caché au survol */ .hover:hover + .hidden(display: block;)
Ces deux options peuvent être utilisées sur votre site Web pour afficher une info-bulle lorsque vous survolez le curseur.
Il existe deux autres méthodes, mais elles sont quasiment identiques, sauf que l'élément apparaîtra lorsque vous cliquerez sur un élément toujours affiché sur le site.
Un moyen simple avec inscription, en un clic.Dans le cas d’un clic, le code sera exactement le même. La seule chose est que pour plus de commodité, j'ai remplacé la classe de certains éléments. La pseudo-classe focus est également utilisée à la place de hover . Il convient également de noter ici que pour que cette méthode fonctionne, il est nécessaire de la remplacer par , c'est-à-dire par un lien hypertexte.
?
Le code CSS dans ce cas est similaire à l'apparence d'un bloc au survol, seules d'autres classes sont utilisées pour plus de commodité. Et pour un bon fonctionnement, nous changeons la pseudo-classe en focus .
/* Nous utilisons la pseudo-classe after pour concevoir le spot lui-même, mais en même temps nous le masquons, car il ne devrait apparaître que lorsque l'on clique dessus */ .focus:after (content: attr(data-title); display: none ; position : absolue ; bas : 130 % ; gauche : 0px ; couleur d'arrière-plan : #fff ; couleur : #3aaeda ; remplissage : 5px ; alignement du texte : centre ; -moz-box-shadow : 0 1px 1px rgba(0, 0,0,.16) ; -webkit-box-shadow : 0 1px 1px rgba(0,0,0,.16); box-shadow : 0 1px 1px rgba(0,0,0,.16);police -size: 12px;) / * Ajouter une propriété pour que lorsque vous cliquez sur un élément, une boîte d'indice apparaisse */ .focus:focus:after(display: block;)
Comme vous pouvez le constater, il n’y a pratiquement aucune différence.
Info-bulle lorsque vous cliquez dessus.Cette méthode de clic sera également plus pertinente si vous devez formater l'info-bulle un peu mieux que ce qui est possible dans l'option précédente.
? c'est une astuce de conception
Et la conception même de la matrice :
/* définit le positionnement relatif du conteneur */ .block(position:relative;) /* Concevoir l'élément caché par défaut */ .hidden (affichage : aucun ; position : absolue ; bas : 130 % ; gauche : 0px ; couleur d'arrière-plan : # fff ; couleur : #3aaeda ; remplissage : 5 px ; alignement du texte : centre ; -moz-box-shadow : 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow : 0 1px 1px rgba (0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) /* Décoration supplémentaire pour l'élément caché (facultatif) */ .focus + .hidden:before (contenu : " " ; position : absolue ; haut : 98 % ; gauche : 10 % ; marge gauche : -5px ; largeur de bordure : 5px ; style de bordure : solide ; hauteur : 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;) /* Décoration supplémentaire de l'élément caché (facultatif) * / .focus + .hidden :after (contenu : " " ; position : absolue ; haut : 100 % ; gauche : 10 % ; marge gauche : -5px ; largeur de bordure : 5px ; style de bordure : solide ; hauteur : 0 ;largeur : 0 ; bordure : 7px solide transparente ; bordure droite : 7px solide #fff ; couleur de la bordure : rgba(0,0,0,.16) transparent transparent transparent ; z-index: 1;) /* Apparition d'un élément masqué au clic */ .focus:focus + .hidden(display: block;)
Comme vous pouvez le constater, il n'y a rien de compliqué. De plus, vous pouvez organiser les changements d'état à la fois par survol et par clic. Cependant, pour être honnête, je ne peux pas dire à quel point la méthode clic-clic est pertinente.
Il existe également une imitation du dernier exemple using , mais son utilisation ne me semble pas tout à fait correcte spécifiquement pour organiser une info-bulle sur votre site web. Si vous n'êtes pas du tout d'accord avec moi, bienvenue dans les commentaires.
Leçon vidéo - Info-bulle sans scripts.C'est tout pour moi. Bonne chance à tous.
Aujourd'hui, nous allons créer des info-bulles en utilisant CSS. Les info-bulles sont ce que vous voyez lorsque vous survolez, par exemple, un lien si l'attribut title en contient une description.
L'info-bulle peut être utilisée à la fois pour les liens et les images.
Dans sa forme brute, l'info-bulle ressemble à ceci :
L'info-bulle est affichée à l'aide de la méthode système standard en utilisant l'attribut title.
Code de lien standard avec info-bulle sans décoration :
Lien
Info-bulle CSSVous pouvez styliser votre info-bulle en utilisant CSS. Nous examinerons trois options info-bulle en CSS.
Malheureusement, il n'existe pas de « recette » CSS pour la conception des titres, nous devrons donc ajouter des attributs supplémentaires, désigner leur conception et les ajouter au code du lien/image pour lequel nous voulons faire une belle info-bulle CSS.
Dans le premier exemple nous ferons info-bulle CSS en haut de l'image tout en bas.
Pour ce faire, nous utiliserons deux attributs : image, et pour que l'info-bulle fonctionne, nous utiliserons ::after et data-text pour afficher le texte de l'info-bulle.
Styles CSS pour cet exemple :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .image ( display : inline-block ; position : relative ; ) .image : hover :: after ( content : attr (data-text) ; /* Afficher le texte de l'info-bulle */ position : absolue ; gauche : 0 ; droite : 0 ; bottom : 0px ; /* Position de l'info-bulle */ z-index : 1 ; /* Afficher l'info-bulle au-dessus des autres éléments */ background : rgba (0 , 255 , 102 , 0.6 ) ; /* Couleur (RVB) et sa transparence */ color : #fff ; /* Couleur du texte */ text-align : center ; /* Aligner le texte au centre */ font-family : Arial, sans-serif ; /* Famille de polices */ font- size : 11px ; / * Taille du texte de l'info-bulle */ padding : 5px 10px ; /* Marges */ border : 1px solid #333 ; /* Options de bordure */ ) |
Image ( display: inline-block; position: relative; ) .image:hover::after ( content: attr(data-text); /* Afficher le texte de l'info-bulle */ position: absolue; gauche: 0; droite: 0; bottom: 0px; /* Position de l'info-bulle */ z-index: 1; /* Afficher l'info-bulle au-dessus des autres éléments */ background: rgba(0,255,102,0.6); /* Couleur (RVB) et sa transparence */ color: # fff; /* Couleur du texte */ text-align: center; /* Aligner le texte au centre */ font-family: Arial, sans-serif; /* Famille de polices */ font-size: 11px; / * Taille du texte de l'info-bulle * / remplissage : 5px 10px ; /* Marges */ bordure : 1px solide #333 ; /* Options de bordure */ )
| 1 | 
|
Résultat:
Cette conception ne fonctionnera pas pour les liens, nous utiliserons donc des options légèrement différentes pour ceux-ci.
La première option affichera une info-bulle au-dessus du lien.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka( affichage : en ligne ; position : relative ; ) .podskazka : survol : après ( arrière-plan : #333 ; arrière-plan : rgba (204 , 102 , 0 , .8) ; border-radius : 5px ; bottom : 26px ; couleur : #fff ; contenu : attr (titre) ; gauche : 20% ; remplissage : 5px 15px ; position : absolue ; z-index : 98 ; largeur : auto ; ) .podskazka : survol : avant ( /* Ajouter une flèche en bas du bloc d'info-bulle */ border : solid ; border-color : #cc6600 transparent ; border-width : 6px 6px 0 6px ; bottom : 20px ; content : "" ; left : 50% ; position : absolue ; z-index : 99 ; ) |
Podskazka( affichage : en ligne ; position : relative ;).podskazka:hover:after( arrière-plan : #333 ; arrière-plan : rgba(204,102,0,.8) ; rayon de bordure : 5 px ; bas : 26 px ; couleur : #fff ; contenu : attr(titre); gauche : 20 % ; remplissage : 5px 15px ; position : absolue ; z-index : 98 ; largeur : auto;).podskazka:hover:before( /* Ajouter une flèche en bas de l'info-bulle bloc */ border : solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; contenu: ""; gauche: 50%; position: absolue; z-index: 99 ;)
Lien
Et la dernière option consiste à afficher une info-bulle sous le lien. L'option est similaire à la précédente, seule l'info-bulle est affichée en dessous.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip ( position : relative ; /* Faire de l'élément le parent des info-bulles */ curseur : help ; ) .tooltip span ( position : absolue ; /* Retirer l'élément du flux */ margin-left : -30000px ; / * Et cachez-le loin derrière le bord de l'écran */ background-color : rgba (0 , 0 , 153 , .8) ; /* Fond de bloc pop-up */ color : #fafafa ; /* Couleur du texte */ padding : 10px ; /* Padding */ -webkit -border-radius : 5px ; /* Coins arrondis */ -moz-border-radius : 5px ; -khtml-border-radius : 5px ; border-radius : 5px ; ) . tooltip : survolez la durée ( /* Au survol */ margin-left : 0 ; /* Remettez le bloc du bord le plus éloigné de l'écran à sa place */ width : 250px ; /* Définissez la largeur */ z-index : 1000 ; /* Placez-le tout en haut */ top : 30px ; /* Marge supérieure */ left : 20px ; /* Remplissage gauche */ ) .tooltip span: after ( content : "" ; /* Contenu ajouté */ width : 0 ; /* Je l'ai caché en le tournant à 0 */ height : 0 ; border- bottom : 10px solid #000099 ; /* Utilisez la bordure inférieure pour définir la couleur et la hauteur du triangle */ border-right : 30px solid transparent ; /* Droite - la largeur du triangle à droite */ position : absolue ; /* Position relative au bloc parent */ top : -10px ; gauche : 10px ; ) |
Tooltip ( position: relative; /* Faire de l'élément le parent des info-bulles */ curseur: help;).tooltip span ( position: absolue; /* Retirer l'élément du flux */ margin-left: -30000px; /* Et cachez-le loin derrière le bord de l'écran */ background-color: rgba(0,0,153,.8); /* Arrière-plan du bloc pop-up */ color: #fafafa; /* Couleur du texte */ padding:10px; / * Remplissage */ -webkit-border- radius : 5px; /* Arrondir les coins */ -moz-border-radius : 5px; -khtml-border-radius : 5px; border-radius : 5px;).tooltip:hover span ( /* Au survol */ margin-left : 0; /* Remettre le bloc du bord le plus éloigné de l'écran à sa place */ width: 250px; /* Définir la largeur */ z-index: 1000; /* Place tout en haut */ /* Positionnez-le par rapport au bloc parent */ top:30px ; /* Remplissage supérieur */ left:20px; /* Remplissage gauche */ ).tooltip span:after( content: ""; /* Contenu ajouté */ width:0; /* Masqué, en le tournant à 0 */ height :0; border-bottom: 10px solid #000099; /* Utilisez la bordure inférieure pour définir la couleur et la hauteur du triangle * / border-right : 30px solide transparent ; /* Droite - la largeur du triangle à droite */ position: absolue; /* Position relative au bloc parent */ top:-10px; gauche : 10px ;)
Fournir des informations supplémentaires sur des éléments d'interface utilisateur potentiellement complexes constitue une partie très importante du travail d'un concepteur de sites Web dans le développement d'un site Web convivial et accessible.
Les info-bulles (éléments de conception permettant d'afficher des astuces sur certains éléments à l'écran) sont un mécanisme couramment utilisé pour afficher des informations supplémentaires au-delà de ce qui est visible sur la page.
S'il existe de nombreuses solutions innovantes utilisant CSS et JavaScript (avec ou sans utilisation d'un framework JavaScript tel que jQuery), il est parfois utile de regarder comment les nouvelles technologies bousculent les techniques anciennes.
Ce didacticiel vous montrera comment créer d'incroyables info-bulles multi-navigateurs en utilisant uniquement CSS.
 |
 |
Chaque fois que vous avez besoin d'expliquer une abréviation ou un acronyme, d'expliquer la signification d'un mot ou de fournir des informations supplémentaires sur quelque chose, les info-bulles constituent une solution simple mais efficace.
Du petit bloc de texte jaune qui apparaît au-dessus d'un élément tel qu'une image et affiche le contenu de l'attribut title (ou de l'attribut alt si vous avez la malchance d'utiliser Internet Explorer) aux solutions sophistiquées basées sur des scripts utilisant des info-bulles, les info-bulles sont un outil fantastique, qui semble avoir peu de popularité dans la communauté du design.
La plupart des navigateurs ont des styles par défaut pour les info-bulles, même s'ils ne sont pas très jolis.
Alors que les normes en évolution rapide avec de nouvelles techniques commencent à être de mieux en mieux prises en charge par les nouveaux navigateurs, la montée en puissance du CSS nous permet également de créer des info-bulles (qui remplacent les paramètres par défaut ennuyeux du navigateur comme celui ci-dessus) à un nouveau niveau de détails et design.
Si vous avez déjà utilisé des solutions basées sur jQuery, vous remarquerez certainement que JavaScript peut faire beaucoup de choses que CSS ne peut pas faire (comme retarder la disparition de l'info-bulle). Mais la mise en évidence et le style peuvent être effectués avec CSS, ce qui améliore votre conception et inspire d'autres superbes conceptions qui vont au-delà des info-bulles.
Dans ce tutoriel, nous allons créer des info-bulles en utilisant du CSS pur.
Cela signifie qu'ils fonctionneront dans les navigateurs qui ne prennent pas en charge CSS3 (comme Internet Explorer 8 et versions antérieures) - ils n'y seront pas aussi beaux que dans les navigateurs plus récents.
L'apparence des effets tels que les couleurs, les polices, les images et les cadres d'info-bulles dépendra de ce qui est utilisé sur l'ordinateur de l'utilisateur final (navigateur, polices installées ou contraste du moniteur).
Extensions CSS3En utilisant des extensions simples mais efficaces telles que les propriétés border-radius et box-shadow, vous pouvez donner à un simple rectangle de message de bulle un nouveau et joli look.
Qu'y a-t-il sous notre capot ?Commençons par le code HTML de notre exemple.
différents types d'info-bullesAfin de vous donner suffisamment d'idées pour vos propres projets, nous créerons cinq types d'info-bulles différents.
Chacun d’eux ressemble beaucoup aux autres afin de standardiser la sortie d’affichage. Mais vous pourrez les expérimenter plus tard pour les étudier en détail et modifier leur apparence.
Ce mécanisme devrait fonctionner dans tous les navigateurs, cependant, si vous en avez besoin, vous pouvez le modifier à votre guise.
Balisage de baseDans le code ci-dessous, nous utilisons le modèle générique XHTML 1.0 avec un élément régulier.
Puisque nous utilisons CSS pour construire nos éléments, à des fins d'apprentissage, le CSS est intégré dans le document à l'aide du .
Vous pouvez également ajouter du code jQuery ou JavaScript pour améliorer les effets et les fonctionnalités si vous le souhaitez !
Info-bulles de balisage HTML Un exemple d'info-bulles réalisées avec CSS !Passez votre souris sur le texte pour voir : indice classique, message critique 
Article critiqueCeci n'est qu'un exemple de la façon de créer des info-bulles en utilisant CSS !, aide 
HelpCeci n'est qu'un exemple de la façon de créer des info-bulles en utilisant CSS !, info 
InfoCeci n'est qu'un exemple de la façon de créer des info-bulles en utilisant CSS ! et avertissement 
Attention : ceci n'est qu'un exemple de la façon de créer des info-bulles en utilisant CSS !.
Ceci est juste un exemple de la façon de créer des info-bulles en utilisant CSS !
Le code utilise un élément (rien de spécial qui lui est associé) et des paragraphes (
) pour le texte contenant des éléments de lien (pour lequel la classe "tooltip" est définie).
Pourquoi une balise est-elle utilisée pour les info-bulles ? ?La raison pour laquelle nous utilisons la balise a plutôt que abbr , dfn ou span est que IE6 prend mal en charge le pseudo-sélecteur:hover pour les éléments autres que a .
Si vous n'avez pas l'intention de prendre en charge IE6, vous pouvez utiliser une autre balise.
Chaque élément span de l'exemple est défini sur la classe classic (pour une info-bulle régulière) ou custom (avec critic , help , info ou warn pour correspondre au jeu de couleurs utilisé).
Cette utilisation du style présente également quelques bonus sous la forme d'un élément em (qui définit le titre de l'info-bulle) et d'une image (qui est utilisée comme icône dans l'info-bulle ; vous pouvez utiliser vos propres images).
CSSNous avons écrit le code HTML de la page et il est temps de faire en sorte que les info-bulles fassent leur travail.
Le code ci-dessous, qui est ajouté à une section de la page, définit chaque lien contenant l'info-bulle dans un joli petit style avec une ligne soulignée en pointillé (pour le différencier d'un lien normal, qui a une ligne continue soulignée) et définit le curseur. avec un point d'interrogation (également pour la différenciation visuelle).
Il supprime également le soulignement et définit la couleur (de sorte que l'élément ressemble moins à un lien normal).
La deuxième partie du code masque simplement l'info-bulle jusqu'à ce qu'elle soit nécessaire.
Tout est très simple !
Styles CSS pour class.tooltip .tooltip ( border-bottom : 1px pointillé #000000 ; couleur : #000000 ; contour : aucun ; curseur : aide ; texte-décoration : aucun ; position : relative ; ) .tooltip span ( margin-left : -999em ; position : absolue ; )Le contenu de l'info-bulle est supprimé de l'affichage à l'aide d'une propriété margin-left négative plutôt que display : none ou visible : masqué, car certains lecteurs d'écran ignorent ces propriétés.
Styles CSS pour les info-bullesNous ferons bientôt en sorte que les info-bulles fonctionnent de la même manière dans différents navigateurs. Ajoutons maintenant quelques lignes de code CSS.
En ajoutant le morceau de code suivant, nous afficherons des info-bulles à l'écran, même si elles sembleront banales et difficiles à séparer visuellement du reste du texte.
CSS pour l'affichage de l'info-bulle .tooltip:hover span ( font-family : Calibri, Tahoma, Geneva, sans-serif ; position : absolue ; gauche : 1em ; haut : 2em ; z-index : 99 ; marge gauche : 0 ; largeur : 250px; ) .tooltip:hover img ( bordure : 0 ; marge : -10px 0 0 -55px ; float : gauche ; position : absolue ; ) .tooltip:hover em ( famille de polices : Candara, Tahoma, Genève, sans- serif ; taille de la police : 1,2 em ; poids de la police : gras ; affichage : bloc ; remplissage : 0,2 em 0 0,6 em 0 ; ) .classic ( remplissage : 0,8em 1em ; ) .custom ( remplissage : 0,5em 0,8em 0,8em 2em ; ) * html a:hover ( background: transparent; ) Ligne requise * htmlVous vous demandez peut-être pourquoi la dernière ligne du code ci-dessus est incluse ? Il définit la transparence de l'arrière-plan du lien. En testant les info-bulles, j'ai découvert un effet étrange dans IE6 qui ne pouvait pas être supprimé tant que l'arrière-plan du lien existait !
Le code ci-dessus garantit la fonctionnalité des info-bulles. Ils sont affichés à l'écran, mais ils sont assez difficiles à séparer du texte général. Il n'existe aucun jeu de couleurs permettant de faire ressortir le texte de l'info-bulle sur la page.
Définir le jeu de couleurs pour les info-bulles/Le code suivant définit un jeu de couleurs pour chacun des cinq styles d'info-bulle.
Après avoir modifié le code de la page et l'avoir mis à jour dans le navigateur, des info-bulles s'afficheront lorsque vous passerez la souris sur le lien, presque de la même manière dans tous les navigateurs.
Code CSS pour le schéma de couleurs .classic ( arrière-plan : #FFFFAA ; bordure : 1px solide #FFAD33 ; ) .critical ( arrière-plan : #FFCCAA ; bordure : 1px solide #FF3334 ; ) .help ( arrière-plan : #9FDAEE ; bordure : 1px solide # 2BB0D7; ) .info ( arrière-plan : #9FDAEE ; bordure : 1px solide #2BB0D7 ; ) .warning ( arrière-plan : #FFFFAA ; bordure : 1px solide #FFAD33 ; )Le code CSS est très simple, mais il donne un superbe look aux infobulles et fait son travail partout. La palette de couleurs peut être modifiée à votre discrétion.
Quelques touches de CSS3 pour un affichage avancé des info-bullesAvant de terminer ce didacticiel, nous ajouterons quelques lignes de code CSS3 pour ajouter des effets visuels à nos info-bulles. Définissons les coins arrondis à l'aide de la propriété border-radius et ajoutons de la dimension à l'aide de la propriété box-shadow.
Étant donné qu'aucune de ces propriétés n'est prise en charge globalement, elles ne fonctionneront que dans certaines des versions de navigateur les plus récentes. Mais là où elles fonctionnent, les info-bulles seront élégantes et sexy !
Ajoutons le code ci-dessous à la durée selector.tooltip:hover et actualisons la page.
Les effets visuels pour la bordure, l'ombre et la transparence soulèvent l'info-bulle au-dessus du texte de la page et rendent les informations contrastées et faciles à lire.
Vous remarquerez peut-être que non seulement les propriétés CSS3 officielles sont utilisées, mais également les extensions pour Mozilla et WebKit.
Propriétés CSS supplémentaires pour les nouveaux navigateurs border-radius : 5px 5px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; box-shadow : 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow : 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow : 5px 5px rgba(0, 0, 0, 0.1);
Ce tutoriel démontre que l'amélioration de l'interface ne nécessite pas beaucoup d'efforts. De plus, il vaut la peine de revoir l'expérience de l'utilisation de CSS, qui peut être utile pour définir un nouveau niveau d'interactivité pour une application Web.
ou quels éléments HTML peuvent avoir des info-bulles
Le chapitre contient des exemples d'info-bulles de la zone de balisage hypertexte.
Dans le menu de gauche vous trouverez des tutoriels HTML modernes et très détaillés.
Ils vous permettront de créer votre site Internet à partir de zéro, mais pour l'instant, regardez un peu plus bas.
Dans ce chapitre, nous examinerons
Avant de passer aux astuces HTML, je vous suggère de lire les informations.
Cela pourrait être intéressant.
Principales tendances des premiers Internet
Depuis 1997, suite à l'avènement des premiers navigateurs, certains consommateurs se sont activement spécialisés dans divers domaines d'Internet, ainsi que dans le domaine des technologies de l'information et du support matériel informatique. De nombreux utilisateurs deviennent des concepteurs de sites Web, commencent à créer des sites Web personnels et d'entreprise et participent à la construction de réseaux informatiques locaux. De cette façon, ils s'éduquent. Cet état de choses a survécu jusqu'à ce jour. Aujourd'hui, il est très à la mode et pratique d'acquérir des connaissances via le World Wide Web. Aujourd'hui et surtout à l'époque, au milieu des années 90 du siècle dernier, les anciens pays socialistes ont besoin de spécialistes en programmation. S’il y a une demande, il y aura une offre. Les programmeurs sont formés en masse – certains dans les universités, d’autres à la maison devant un écran d’ordinateur. En ces temps fabuleux, les forums de programmation gagnent en popularité, où jeunes et moins spécialistes échangent leurs expériences et leurs idées.
Info-bulle pour le lien HTMLIci, tout est presque pareil : l'attribut title="" définit Info-bulle HTML .
L'alt="" de l'image spécifie le texte alternatif qui sera affiché sur la page si l'image n'est pas affichée.
Ne confondez pas l'info-bulle HTML et le texte alternatif, car ce sont des choses complètement différentes.
Info-bulle HTML pour le texteL'info-bulle HTML s'applique à presque tous les éléments de la page.
Pour le dire différemment, le title="" que nous connaissons dans les exemples ci-dessus peut avoir des balises de titre de tous les niveaux, des balises de paragraphe, des blocs, des images et des éléments linéaires tels que . et d'autres.
J'ai de l'expérience en plaçant l'attribut title="" dans les balises de titre et les liens de premier niveau.
Personnellement, j'utilise naturellement les info-bulles dans le cadre des inévitables expériences amateurs d'optimisation du texte de sites Web pour les moteurs de recherche. Je ne prétends pas juger du succès de mes expériences. Pour être honnête, le résultat d'une telle optimisation est difficile à retracer, mais il est très facile d'en faire trop avec des mots-clés et des expressions. Soyez donc prudent et n’en faites pas trop dans votre promotion, car vous risquez toujours d’être puni par les moteurs de recherche.