COMPOSANTS
Infobulle cliquable
Un Infobulle est un message bref et informatif qui apparaît lorsqu’un utilisateur survole ou met le focus sur un élément d’une interface graphique.Il fournit une explication ou un contexte supplémentaire sur l’élément, améliorant ainsi la compréhension, l’orientation et l’utilisabilité.
Demo
Code
Documentation
Installation
Suivez les étapes ci-dessous pour installer et utiliser le composant ip-tooltip dans votre projet.
Étape 1
Installez le composant ip-tooltip en tant que dépendance dans votre projet :
Étape 2
Importez le module dans votre fichier script :
Utilisation
Pour utiliser ce composant, ajoutez les propriétés sous forme d’attributs.
| Propriété | Attribut | Nécessité | Description | Type | Valeur par défaut |
|---|---|---|---|---|---|
| tooltipTrigger | tooltip-trigger | Requise | Le bouton qui affichera le tooltip. | string | Non défini |
| tooltipContent | tooltip-content | Requise | Le texte qui sera affiché dans le tooltip. | string | Non défini |
| type | type | Optionnel | Texte affiché sur le bouton Retour. | 'click' | 'hover' | hover |
| tooltipBtnClose | tooltip-btn-close | Optionnel | Si vous devez ajouter un bouton de fermeture dans le tooltip. | boolean | false |
| tooltipTitle | tooltip-title | Optionnel | Le titre du tooltip si vous souhaitez en ajouter un. | string | Non défini |
| tooltipBtn1 | tooltip-btn-1 | Optionnel | Si vous devez ajouter un premier bouton dans le tooltip. | string | Non défini |
| tooltipBtn2 | tooltip-btn-2 | Optionnel | Si vous devez ajouter un second bouton dans le tooltip. | string | Non défini |
| btn1AriaLabel | btn-1-aria-label | Optionnel | Libellé ARIA du premier bouton, requis pour l’accessibilité. | string | Non défini |
| btn2AriaLabel | btn-2-aria-label | Optionnel | Libellé ARIA du second bouton, requis pour l’accessibilité. | string | Non défini |
Exemple
Personnalisation
Nous disposons d’un ensemble de variables prédéfinies permettant de personnaliser l'infobulle' :
--primary-color--secondary-color
Nous disposons également d’un ensemble de parts qui peuvent être utilisés pour le personnaliser :
close-btn: pour le bouton de fermeture, s’il existe.tooltip-btn1: pour le premier bouton, s’il existe.tooltip-btn2: pour le deuxième bouton, s’il existe.tooltip-content: pour le contenu du tooltip.tooltip-trigger: pour le bouton déclencheur.
Pour mettre à jour ces valeurs, utilisez ce qui suit :
Écoute des événements
Pour écouter les événements émis par ip-tooltip, ouvrez la console de votre navigateur.Les détails des événements s’afficheront dans la console lorsque vous interagirez avec les boutons.