Microtip - Bibliothèque d'infobulles CSS avec fonctionnalités d'accessibilité native

Vous pouvez faire une recherche rapide sur GitHub pour trouver des dizaines de bibliothèques d’info-bulles personnalisées. Et il semble que de nouveaux articles arrivent chaque mois sur le Web.

Microtip est une ressource unique dans la mesure où il s’appuie sur des info-bulles CSS pures, offre une esthétique personnalisée et utilise un code source entièrement accessible pour tous les utilisateurs.

Si vous n'avez jamais trop pensé à l'accessibilité, Microtip peut vous faire changer d'avis. C'est le mélange parfait de design épuré avec fonctionnalité pour tous les appareils, tous les navigateurs, et pour les utilisateurs ayant des déficiences majeures.

Sur la page d'accueil, vous trouverez un lien de téléchargement vers la bibliothèque Microtip, ainsi que plusieurs démos de code..

Vous pouvez obtenir cette configuration via un gestionnaire de paquets, un téléchargement direct ou en le tirant directement à partir d'un CDN. Il livré avec un fichier CSS et c'est essentiellement tout ce dont vous avez besoin.

Une fois que vous avez ajouté Microtip à votre page, vous pouvez commencer à ajouter des info-bulles sur les éléments de la page. Ceux-ci sont entièrement conforme à la WAI afin qu'ils se conforment parfaitement aux normes d'accessibilité modernes.

Voici un exemple de code d'info-bulle associé à un élément de bouton avec une position personnalisée:

Pas beaucoup de code à droite?

Cette bibliothèque est super légère avec un total de 1Ko minifié. C'est juste fou vu combien vous obtenez avec ces infobulles.

Les propriétés CSS personnalisées peuvent être transmises via des attributs HTML pour définir la taille de la police, le style de transition, l’atténuation et de nombreux autres paramètres..

Vous pouvez également écraser le CSS directement pour agrandir les info-bulles avec différentes couleurs ou polices.

Jetez un coup d'oeil à la section de personnalisation sur la page principale pour plus de détails. Tout passe par HTML et CSS, vous n'avez donc pas besoin toute connaissance de script pour que cela fonctionne.

Microtip est super facile à installer et à personnaliser Donc, si vous connaissez au moins le codage de base de l'interface, tout ira bien.

Mais jetez un coup d’œil au dépôt GitHub pour plus d’informations sur la configuration et pour obtenir une copie de la feuille de style.

Si vous avez des questions ou des suggestions concernant de nouvelles fonctionnalités, vous pouvez également envoyer un message au créateur sur Twitter @_ighosh..