CATALOGUE
Code & Data
Formation
XHTML/CSS
Maîtriser Materialize CSS
Comment ajouter des tooltips à un formulaire
DescriptionProgrammeAvis
49,90€
Je commande
Formation incluse dans l'abonnement Elephorm
Je m'abonne à Elephorm
Étapes détaillées pour intégrer des tooltips
Objectifs
Les objectifs de cette vidéo incluent :
- Apprendre à intégrer des tooltips dans un formulaire.
- Comprendre l'utilisation des data elements.
- Configurer efficacement les positions et délais des tooltips.
Résumé
Découvrez comment ajouter des tooltips à vos formulaires en quelques étapes simples.
Description
Dans cette leçon, vous apprendrez à intégrer des tooltips dans vos formulaires pour améliorer l'expérience utilisateur. Nous allons aborder les différentes classes et data elements nécessaires pour configurer ces tooltips, ainsi que leurs positions et délais d'affichage. Vous aurez une vue d'ensemble sur la manière de les adapter pour différents champs de formulaire comme les noms et les e-mails.
Cela inclut :
- L'ajout de la classe
tooltips
(attention, deux 'P'). - La configuration des data elements tels que
data-position
(top, bottom, left, right),data-delay
etdata-tooltip
. - Un exemple concret pour configurer un tooltip avec le texte 'Remplissez votre nom svp' et un autre pour l'email.
À la fin de cette leçon, vous serez capable de personnaliser les tooltips pour n'importe quel champ de formulaire.
Questions fréquentes
Questions réponses
Que doit-on ajouter à un champ de formulaire pour afficher un tooltip?
Il est nécessaire d'ajouter la classe
tooltips
ainsi que les data elements appropriés.
Quelles sont les options de positionnement pour un tooltip?
Les options de positionnement pour un tooltip sont top, bottom, left et right.
Quelle est l'utilité du data element <code>data-delay</code>?
Le data element
data-delay
détermine le délai avant lequel le tooltip apparait à l'écran après un clic sur l'élément de formulaire.
Programme détaillé
Module 1 - Materialize css
Module 2 - Un site en materializecss
Préparer ses éléments
04:04
Une page en parallaxe
13:07
Des textes accrocheurs
08:38
Un slider pleine largeur
06:38
Un formulaire dynamique
22:54
Scrollfire et infobulles
06:34
Tooltips
02:09
Cartes
08:15
Footer
03:54
Conclusion
02:16