Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 2 sur 2
  1. #1
    Rédacteur/Modérateur

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 099
    Points : 23 118
    Points
    23 118

    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 :
    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 souhaitez participer à la rubrique (X)HTML/CSS, contactez-moi !
    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
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 159
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 159
    Points : 5 227
    Points
    5 227

    Par défaut

    Merci pour la ressource.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •