Créez des tooltips en pur CSS avec hint.css
Sans avoir besoin d'utiliser du JavaScript

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Le , par FirePrawn, Responsable Développement Web
hint.css est une bibliothèque pure CSS qui permet de créer des tooltips.
Un tooltip est une petite bulle d'information qui apparait lorsque l'on survole un élément HTML avec sa souris.
Grâce à cette bibliothèque vous n'avez plus besoin de JavaScript pour créer et personnaliser vos tooltips !
À la place hint.css utilise l'attribut data-*, les pseudo éléments, la propriété content et les transitions CSS3. De plus la bibliothèque utilise la convention de nommage BEM.

Pour l'utiliser rien de plus simple : il suffit de télécharger une des deux versions disponibles et d'inclure la feuille de style dans votre page Web.
Ensuite il suffit de passer le contenu du tooltip dans l'attribut data-hint de votre élément :

Code :
Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>
Si vous souhaitez contribuer au projet, hint.css est développé en utilisant Sass. Les sources sont disponibles sur le repository GitHub du projet.

Pour plus d'informations ou encore voir des exemples je vous invite à consulter le site du projet.

Télécharger hint.css.
Télécharger hint.css en version minifiée.

Source : thechangelog.com

Et vous ?

Avez-vous déjà implémenté des tooltips dans vos formulaires ?
L'utilisation de JavaScript est-elle un frein pour vos développements ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de rodolphebrd rodolphebrd
http://www.developpez.com
Modérateur
le 22/02/2013 13:08
Merci pour la ressource.
Offres d'emploi IT
Développeur web php (h/f)
CDI
LCVA - Nord Pas-de-Calais - Lille (59000)
Parue le 21/10/2014
ADMINISTRATEUR CITRIX (H/F)
CDI
MMA - Pays de la Loire - LE MANS (72000)
Parue le 30/09/2014
Développeur php - symfony 2 (h/f)
CDI
Leguide.com - Ile de France - Paris (75000)
Parue le 02/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula