Info-bulles

Vue d'ensemble

Les info-bulles permettent d'afficher des informations complémentaires sur un élément et de manière un peu plus détaillée lorsque cet élément est survolé ou reçoit le focus. Une info-bulle devient généralement visible, après un court délai généralement de, une à cinq secondes

Pour être le plus accessible possible, les info-bulles fonctionnent de pair avec les attributs aria-label. Il suffit, pour afficher, au survol, le contenu de l'attribut aria-label de lui adjoindre l'attribut data-tooltip. Celui-ci prend en paramètre la position où sera situé l'info-bulle. Les paramètres possibles sont top, left, bottom et right

Le délai d'apparition est configurable via la variable CSS locale --tooltip-delay. Par défaut le temps d'attente est de 1 seconde.

Par défaut, la taille des info-bulles, est égal à celle de son contenu. Elle est comprise entre un minimum de 6em et un maximum de 10em. Ces bornes, peuvent être définie via les variables locale --tooltip-size-small et --tooltip-size-large. Si le texte est plus long, celui-ci sera automatiquement tronqué.

La taille des info-bulles peut-être définie via l'attribut data-tooltip-size et le texte passe automatiquement à la ligne en suivant une césure sur les mots.

Cet attribut supporte un des paramètres suivant :

• fit : La largeur maximale, sera celui de l'élément possédant l'info-bulle
• small : La largeur sera réduite à la taille contrôlée par la variable --tooltip-size-small par défaut 6em
• medium : La largeur sera de la taille contrôlée par la variable --tooltip-size-medium par défaut 10em
• large : La largeur sera de la taille contrôlée par la variable --tooltip-size-medium par défaut 16em

Les info-bulles peuvent être affichée en permanence, il suffit d'ajouter l'attribut data-tooltip-visible

Pour être accessible, par les technologies d'assistance, Les éléments avec le rôle d'info-bulle doivent être référencés via l'utilisation de aria-dedicatedby. Celui-ci est placé dans l'élément propriétaire. L'élément qui sert de conteneur à l'info-bulle doit contenir le role role="tooltip".

Il est à noter que l'attribut aria-label ne peut pas contenir de code HTML. Pour palier à cette problématique, le contenu devra être englobé dans un élément enfant désigné par le role role="tooltip".

En sus, Sass Swing met à disposition des classes CSS équivalente aux attributs pour gérer l'affichage.

• La classe .tooltip pour définir l'élément propriétaire de l'info-bulle.
• Les classes .tooltip--top, .tooltip--left, .tooltip--bottom et .tooltip--right pour définir la position.
• Les classes .tooltip--fit, .tooltip--small, .tooltip--medium et .tooltip--large pour définir la dimension.

Néanmoins, Étant donné que le contenu de l'info-bulle ne reçoit jamais le focus et n'est pas dans l'ordre de tabulation, une info-bulle ne peut pas contenir d'éléments interactifs tels que des liens, des entrées ou des boutons. L'utilisateur ne pourra pas agir avec eux.

On peut également forcer l'affichage du contenu, comme plus haut, avec l'utilisation de l'attribut data-tooltip-visible dans l'élément propriétaire.

Lorem picsum

Random Lorem picsum

Lorem picsum

Random Lorem picsum

Picsum Photos

Personnalisation