Infobulle

L’infobulle (ou bulle d’aide, aide contextuelle) est un élément d’indication permettant d’afficher un contenu complémentaire lié à un élément précis de l’interface.

Elle est cachée par défaut et s’affiche par-dessus le reste de la page lors du survol ou au clic de l’élément associé.

HTML

Structure du composant

Il existe deux types d’Infobulles suivant son déclenchement.

Déclenchement au survol

L’infobulle au survol se compose des éléments suivants :

Une zone de déclenchement :
- Doit être un element focusable (<a>, <input>, <select>, <textarea>, etc) pour déclencher l'affichage du conteneur à la prise de focus.
- Elle est liée au conteneur via l'attribut aria-describedby, sa valeur doit correspondre à l'attribut id du conteneur.
Un conteneur pour le texte de l'infobulle :
- Représenté par un élément <span>.
- Doit avoir un attribut id obligatoire, pour être lié à la zone de déclenchement.
- Doit avoir un attribut role="tooltip".
- Doit avoir les classes fr-tooltip et fr-placement.

Exemple de structure HTML

<a class="fr-link" aria-describedby="tooltip-1" href="[à modifier]">
    Exemple
</a>
<span class="fr-tooltip fr-placement" id="tooltip-1" role="tooltip">
    Lorem [...] elit ut.
</span>

Déclenchement au clic

L’infobulle au clic se compose des éléments suivants :

Une zone de déclenchement :
- La zone de déclenchement est une balise <button type="button">.
- Elle est liée au conteneur via l'attribut aria-describedby, sa valeur doit correspondre à l'attribut id du conteneur.
- Doit avoir les classes fr-btn--tooltip fr-btn.
Un conteneur pour le texte de l'infobulle :
- Représenté par un élément <span>.
- Doit avoir un attribut id obligatoire, pour être lié à la zone de déclenchement.
- Doit avoir un attribut role="tooltip".
- Doit avoir les classes fr-tooltip et fr-placement.

Exemple de structure HTML

<button class="fr-btn--tooltip fr-btn" type="button" aria-describedby="tooltip-2">
    Information contextuelle
</button>
<span class="fr-tooltip fr-placement" id="tooltip-2" role="tooltip">
    Lorem [...] elit ut.
</span>

CSS

Installation du CSS

Pour fonctionner correctement, le style CSS de l'infobulle et du core doit être importé dans la page. Les fichiers doivent être inclus dans le <head> avant le contenu de la page.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/tooltip/tooltip.min.css" rel="stylesheet">

NB: Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour une compatibilité avec Internet Explorer 11, les fichiers legacy peuvent également être ajoutés :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/tooltip/tooltip.legacy.min.css" rel="stylesheet">

JavaScript

L'infobulle est un composant qui nécessite l'importation de fichiers JavaScript spécifiques pour son fonctionnement de base.

Installation du JavaScript

Chaque composant utilisant javascript possède un fichier Js spécifique et requiert le fichier Js du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) :

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/tooltip/tooltip.module.min.js"></script>

NB: Il est aussi possible d'importer le Js global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé :

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/tooltip/tooltip.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur le tooltip, les éléments suivants sont instanciés :

Le conteneur, via la classe : fr-tooltip
Le déclencheur, via l'attribut : aria-describedby lié à l'id du conteneur

Une fois chargé, le Js ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés

API

Il est possible d'interagir avec les instances du composants en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_TOOLTIP');
dsfr(elem).tooltip.show();

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

parent
Description	Retourne l'instance du dsfr parente
Type	property
Retour	object \| null
Exemple	`dsfr(elem).parent`

children
Description	Renvoie un tableau d'instances enfants
Type	property
Retour	Array
Exemple	`dsfr(elem).children`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).tooltip.node`

isEnabled
Description	Défini si le fonctionnement de l'infobulle est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).tooltip.isEnabled = false`

isShown
Description	Défini si l'infobulle est affichée ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).tooltip.isShown = false`

show
Description	Affiche l'infobulle
Type	function
Arguments	none
Retour	none
Exemple	`dsfr(elem).tooltip.show()`

hide
Description	Cache l'infobulle
Type	function
Arguments	none
Retour	none
Exemple	`dsfr(elem).tooltip.hide()`

mode
Description	Défini le mode de placement de l'infobulle
Type	property
Retour	'placement_auto' \| 'placement_manual'
Exemple	`dsfr(elem).tooltip.mode = 'placement_manual'`

align
Description	Défini l'alignement vertical de l'infobulle en `mode='placement_manual'`
Type	property
Retour	'align_start' \| 'align_center' \| 'align_end'
Exemple	`dsfr(elem).tooltip.align = 'align_start'`

place
Description	Défini le placement de l'infobulle par rapport au déclencheur en `mode='placement_manual'`
Type	property
Retour	'placement--top' \| 'placement--bottom' \| 'placement--left' \| 'placement--right'
Exemple	`dsfr(elem).tooltip.place = 'placement--top'`

tooltipReferent

parent
Description	Retourne l'instance du dsfr parente
Type	property
Retour	object \| null
Exemple	`dsfr(elem).parent`

children
Description	Renvoie un tableau d'instances enfants
Type	property
Retour	Array
Exemple	`dsfr(elem).children`

node
Description	Renvoie le noeud HTML de l'élément.
Type	property
Retour	DOMElement
Exemple	`dsfr(elem).tooltipReferent.node`

isEnabled
Description	Défini si le fonctionnement du déclencheur est activé ou non
Type	property
Retour	Boolean
Exemple	`dsfr(elem).tooltipReferent.isEnabled = false`

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

Sur l’infobulle, les événements suivants sont disponibles :

événements
Événement	Action	Élément	Attribut
`dsfr.show`	Affichage de l’infobulle	tooltip	`data-fr-js-tab-tooltip`
`dsfr.hide`	Masquage de l’infobulle	tooltip	`data-fr-js-tab-tooltip`

Note de version

Voir les évolutions sur github

v1.14.0 - 25 juin 2025

✨ feat

modal

tooltip

#1174

v1.13.0 - 4 décembre 2024

Correction du placement du tooltip dans un élément possédant un filter (modal, header)
Gestion du placement en position absolute plutot que fixed

🐛 fix

core

tooltip

#1010

v1.11.1 - 31 janvier 2024

fallback du fond en conic gradiant

ajout d'un fallback en linear-gradiant pour les navigateur qui ne supporte pas le conic-gradiant (ex: firefox < 83)

🐛 fix

tooltip

#863

v1.10.0 - 19 juillet 2023

retrait exemple texte

l'utilisation d'un tooltip sur un texte pose des problèmes de restitution
cet usage est déconseillé
retrait de l'exemple

📝 doc

tooltip

#710

interaction globale et focus iOS

Correctif à la pression de la touche Escape sur la modale : si l'élément actif (focus) est un élément de formulaire ou un média, la modale n'est pas refermée pas pour permettre l'interaction native de l'élément actif
Correctif iOS de la prise de focus au clic
Fermeture des tooltips dés au clic sur n'importe quel endroit
Fermeture des tooltip à la pression sur la touche escape, où que soit le focus

🐛 fix

tooltip

modal

#691

autorise le survol sur l'information contextuelle
ajoute un tabindex="0" sur l'example dans un texte
arrondi la valeur de placements de la flèche verticale à 2 décimales
retire le aria-hidden="true" et ajoute display="none"

🐛 fix

tooltip

#686

mise a jour exemple

Dans l'exemple "Information contextuelle dans un tableau", remplacement de l'information contextuelle par une infobulle (interaction au clic plutôt qu'au survol)

🐛 fix

tooltip

#666

Le composant Infobulle (ou bulle d’aide, aide contextuelle) permet d’afficher du contenu dans le contexte de navigation (non modal), à propos et lors de l’interaction avec un élément précis de l’interface. Il est caché par défaut, et s’affiche au survol ou au clic de l’élément associé, par-dessus le reste de la page.

🎉 feat

tooltip

#486

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github

Infobulle

HTML

Structure du composant

Déclenchement au survol

Déclenchement au clic

CSS

Installation du CSS

JavaScript

Installation du JavaScript

Instances

API

tooltip

tooltipReferent

Événements

Note de version

v1.14.0 - 25 juin 2025

fermeture du tooltip avant la fermeture de la modale

v1.13.0 - 4 décembre 2024

positionnement du tooltip dans header & modale

v1.11.1 - 31 janvier 2024

fallback du fond en conic gradiant

v1.10.0 - 19 juillet 2023

retrait exemple texte

interaction globale et focus iOS

mise a jour exemple

ajout de la fonctionnalité Tooltip

Proposer une amélioration