Création d'une info-bulle animée facilement avec Hint.css

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

L'info - bulle est un excellent moyen d'afficher des informations supplémentaires sur un site Web sans prendre plus d'espace . L'infobulle apparaît généralement au survol de la souris, et il existe probablement des centaines de plugins jQuery pour inclure des infobulles sur votre site Web.

Cependant, certains inconvénients communs de l'utilisation de plugin jQuery est qu'il vient avec un ensemble d'options inutiles, et gonflé avec des codes qui ralentissent les performances du site.

Donc, aujourd'hui, nous allons jeter un oeil à une alternative de création d'info-bulle. Avec un tas de nouvelles fonctionnalités dans CSS3, il est maintenant possible de créer une info-bulle de fantaisie comparable en utilisant seulement CSS. Commençons.

Utiliser Hint.css

Dans ce post, nous n'allons pas le construire à partir de zéro. Nous allons utiliser Hint.css. Hint.css est une collection de classes et de règles de style, ce qui nous permet de créer une info-bulle plus rapidement. Pour l'utiliser, ajoutez simplement la feuille de style à votre document HTML, ou copiez toutes les règles de style dans votre propre feuille de style.

Maintenant, dans le texte de votre document, encapsulez la pièce dans laquelle vous souhaitez insérer une info-bulle avec un élément en ligne, par exemple en utilisant un élément span ou anchor. Et ajoutez le contenu de l'info-bulle avec l'attribut data-hint, comme ceci.

 across the globe are filled with freelance contractors all tendering for a limited amount of jobs. Cependant, parce que les marchés indépendants à travers le monde sont remplis d'entrepreneurs indépendants tous les appels d'offres pour un nombre limité d'emplois. 

Techniquement, c'est tout ce dont vous avez besoin. Si vous prévisualisez votre document dans le navigateur et passez votre souris, vous devriez voir apparaître l'info-bulle.

Cette info-bulle est affichée avec pseudo-élément, et en utilisant CSS3 Transition pour le mouvement animé.

Donnez-lui un indice

À moins que vous n'utilisiez un élément d'ancrage avec des styles distinctifs par défaut, rien n'indique que le mot en question affichera une info-bulle comme celle que vous voyez dans la capture d'écran ci-dessus.

Ainsi, dans l'intérêt d'une meilleure expérience utilisateur, nous pouvons ajouter des styles supplémentaires pour lui donner un indicateur, par exemple:

 span [indicateur de données] {border-bottom: 1px pointé #aaa; } span [indicateur de données]: hover {curseur: pointeur; } 

Ces styles donneront à l'élément span avec data-hint attribut data-hint un fond en pointillés. Vous pouvez ajuster les styles pour répondre à vos exigences de conception.

Direction de l'info-bulle

Nous pouvons montrer l'info-bulle dans quatre directions différentes: haut, bas, droite et gauche en utilisant les classes fournies.

La gauche

 marchés 

Droite

 marchés 

Haut

 marchés 

Bas

 marchés 

Ou continuez à montrer l'info-bulle

 marchés 

Pensée finale

Avec des propriétés plus avancées dans CSS3, aujourd'hui, nous ne comptons plus uniquement sur JavaScript ou jQuery pour créer une interface utilisateur sophistiquée, comme la création d'une info- bulle, et en utilisant Hint.css, nous pouvons en créer une en snap. Mais comme indiqué au début de ce post, cette technique nous permet seulement de créer une simple info-bulle à base de texte .

Si vous souhaitez créer une info-bulle plus avancée, par exemple, une info-bulle avec image ou afficher l'info-bulle au clic de la souris plutôt qu'au survol de la souris, l'utilisation de JavaScript ou de jQuery reste la meilleure solution.

Le guide du rédacteur pigiste pour une meilleure gestion du temps

Cet article fait partie de notre «Guide to Freelancing series» - composé de guides et de conseils pour vous aider à devenir un meilleur travailleur indépendant. Cliquez ici pour lire plus de cette série. Temps. Il n'y en a tout simplement pas assez. Demandez à n'importe quel auteur de contenu indépendant quelle est sa plus grande préoccupation à un moment donné, et à moins qu'il ne soit au milieu d'une autre maladie, il vous dira qu'il n'y a pas assez d'heures dans la journée pour faire ce qu'il doit faire .Le contenu s

(Conseils techniques et de conception)

15 leçons "L'art de la guerre" vous apprend à remporter des batailles vitales

L'art de la guerre par Sun Tzu est largement considéré par beaucoup comme non seulement une «bible» pour le champ de bataille, mais aussi une grande source de leçons pour la vie en général. La vie en elle-même est une lutte constante pour, sinon rester au sommet, au moins le faire à travers les défis quotidiens, tout en tirant le meilleur parti de nos ressources .Soumis à

(Conseils techniques et de conception)