IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Créez des tooltips en pur CSS avec hint.css


Sujet :

CSS

  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Consultant technique
    Inscrit en
    Mars 2011
    Messages
    3 179
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Consultant technique

    Informations forums :
    Inscription : Mars 2011
    Messages : 3 179
    Points : 19 374
    Points
    19 374
    Par défaut Créez des tooltips en pur CSS avec hint.css
    Des tooltips personnalisables sans utiliser de JavaScript ?
    C'est maintenant possible avec hint.css !

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Merci pour la ressource.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

Discussions similaires

  1. interaction sur un CSS avec des variable PHP ? on peut ?
    Par dembroski dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/07/2007, 10h20
  2. Probleme de chargement des CSS avec Tomcat
    Par netking2006 dans le forum Tomcat et TomEE
    Réponses: 2
    Dernier message: 28/05/2007, 22h12
  3. Probleme de compatabilité des CSS avec IE7
    Par stratus dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 15/05/2007, 18h09
  4. Probleme de double rolover en CSS avec des images
    Par gandoulfe dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 12/04/2006, 17h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo