Créer des infobulles miniatures dans Pure CSS avec Wenk

Avec un nom aussi étrange, vous ne vous attendriez pas à beaucoup de Wenk, un libre Bibliothèque d'infobulles CSS. Pourtant c'est une des plus petites bibliothèques vous pouvez obtenir une mesure inférieure à 1 Ko lorsque gzippé.

Wenk utilise CSS pur avec Les données-* les attributs créer info-bulles en direct que vous pouvez changer de style et vous positionner à votre guise. Mieux encore, c'est une bibliothèque entièrement gratuite avec le code source disponible sur GitHub.

Ces infobulles légères sont très simples à ajouter à votre site Web. Vous avez juste besoin du Wenk.css fichier ajouté à votre en-tête de page, que vous pouvez télécharger depuis le dépôt GitHub.

Ou, vous pourriez même ajouter le fichier CDN qui est hébergé sur le CDN de GitHub. Voici le code pour cela:

Ou, si vous êtes un fan de npm / bower, vous pouvez installer ce paquet du terminal.

Les balises d'info-bulle par défaut n'ont pas beaucoup de données personnalisées. Ils vous ont laissé sélectionnez la position et la largeur, mais tu dois changer manuellement le CSS si vous les voulez différemment.

Par exemple, vous souhaiterez peut-être ajouter une flèche CSS à l'info-bulle qui apparaît au-dessus de l'élément de l'info-bulle. C’est assez simple à créer mais vous devrez parcourir la feuille de style Wenk pour trouver la classe CSS exacte étendre.

Voici un échantillon de certains code par défaut pour les info-bulles Wenk:

   Wenk à droite!  

La page de destination principale de Wenk comprend démos en direct que vous pouvez tester en vol stationnaire. Ceux-ci sont les infobulles les plus basiques vous aurez mais ils sont parfaits pour une bibliothèque qui pèse moins d'un kilo-octet.

Une chose importante à considérer est support du navigateur. Toutes les versions de Chrome et Firefox devrait bien fonctionner. Même chose avec Opera 12+ et Opera Mini v8 +. Mais IE8 et IE10 semblent avoir des difficultés rendre ces info-bulles. Heureusement, leur part de marché diminue rapidement, mais il faut en tenir compte avant d'utiliser.

Je suis toujours étonné de tout ce que vous pouvez faire avec si peu de Ko. La bibliothèque Wenk est un témoignage du développement de front-end moderne et montre qu’un peu peut aller très loin.

Vous pouvez creuser à travers le source entière sur GitHub, avec démos en direct et extraits de code configurer et créer ces info-bulles pour votre propre site.