Info-bulles

  • Article

Une info-bulle est une fenêtre contextuelle qui contient des informations supplémentaires sur un autre contrôle ou objet. Les info-bulles s’affichent automatiquement lorsque l’utilisateur déplace le focus sur, appuie de manière prolongée ou pointe le pointeur sur le contrôle associé. L’info-bulle disparaît lorsque l’utilisateur déplace le focus, cesse d’appuyer sur ou arrête de pointer le pointeur sur le contrôle associé (sauf si le pointeur se déplace vers l’info-bulle).

Notes

À compter de Windows 11 version 21H2, une info-bulle peut également être ignorée en appuyant sur la touche CTRL.

Info-bulle

Est-ce le contrôle approprié ?

Utilisez une info-bulle pour fournir plus d’informations sur un contrôle avant d’inviter l’utilisateur à effectuer une action. Les info-bulles doivent être utilisées avec parcimonie, et uniquement quand elles aident l’utilisateur à accomplir une tâche. En règle générale, si les informations sont déjà disponibles autre part, n’ajoutez pas une info-bulle. Une info-bulle utile donne un éclairage sur une action qui n’est pas bien expliquée.

Quand utiliser une info-bulle Pour vous décider, posez-vous les questions suivantes :

  • Les informations doivent-elles devenir visibles lors du passage du pointeur ? Si ce n’est pas le cas, utilisez un autre contrôle. Les info-bulles doivent uniquement être affichées par une action de l’utilisateur ; ne les laissez jamais s’afficher d’elles-mêmes.

  • Le contrôle a-t-il une étiquette avec un libellé ? Si ce n’est pas le cas, utilisez une info-bulle pour l’indiquer. Attribuer une étiquette à la plus grande partie des contrôles est une bonne habitude de conception de l’expérience utilisateur et pour ceci, vous n’avez pas besoin d’info-bulles. Les contrôles et les commandes des barres d’outils affichant seulement des icônes doivent être accompagnés d’une info-bulle.

  • Un objet a-t-il besoin d’une description ou d’informations complémentaires ? Si c’est le cas, utilisez une info-bulle. Mais le texte doit être complémentaire, c’est-à-dire non essentiel aux tâches principales. S’il est essentiel, mettez-le directement dans l’interface utilisateur de sorte que les utilisateurs le trouvent sans peine.

  • L’information complémentaire est-elle une erreur, un avertissement ou un état ? Si c’est le cas, utilisez un autre élément d’interface utilisateur, tel un menu volant.

  • Les utilisateurs doivent-ils interagir avec l’info-bulle ? Le cas échéant, utilisez un autre contrôle. Il est impossible d’interagir avec une info-bulle parce qu’elle disparaît lorsqu’on déplace la souris.

  • Les utilisateurs ont-ils besoin d’imprimer l’information complémentaire ? Le cas échéant, utilisez un autre contrôle.

  • Les utilisateurs pourraient-ils être ennuyés ou gênés par les info-bulles ? Si cela peut être le cas, envisagez une autre solution, notamment de ne rien ajouter du tout. Si les info-bulles sont susceptibles de gêner l’utilisateur, permettez-lui de les désactiver.

Recommandations

  • Utilisez les info-bulles avec parcimonie (ou pas du tout). Les info-bulles sont une interruption. Une info-bulle peut être aussi distrayante qu’une fenêtre contextuelle. Dès lors, utilisez-les seulement si elles apportent un plus.
  • Veillez à ce que le texte de l’info-bulle soit concis. Les info-bulles sont adaptées aux phrases courtes et aux fragments de phrases. La lecture de grands blocs de texte peut prendre du temps et l’info-bulle risque d’expirer avant que l’utilisateur ait fini de la lire.
  • Veillez à ce que l’information complémentaire soit utile et pertinente. Le texte de l’info-bulle doit être instructif. N’écrivez pas quelque chose qui est évident ou qui apparaît déjà à l’écran. Le texte de l’info-bulle n’étant pas toujours visible, il doit apporter une information complémentaire que l’utilisateur n’est pas obligé de lire. Les informations importantes doivent être communiquées via un étiquetage explicite des contrôles ou via un texte complémentaire placé directement dans l’interface utilisateur.
  • Utilisez les images de façon appropriée. Il est parfois préférable d’utiliser une image dans une info-bulle. Par exemple, quand l’utilisateur passe le curseur sur un lien hypertexte, vous pouvez utiliser une info-bulle pour afficher un aperçu de la page liée.
  • Les raccourcis clavier sont affichés dans les info-bulles par défaut. Si vous ajoutez votre propre info-bulle, assurez-vous qu’elle inclut des informations sur les raccourcis clavier disponibles.
  • N’utilisez pas d’info-bulle pour afficher du texte déjà visible dans l’interface utilisateur. Par exemple, ne placez pas sur un bouton une info-bulle dont le texte est identique à celui du bouton.
  • Ne placez pas de contrôles interactifs à l’intérieur de l’info-bulle.
  • Ne placez pas d’images qui semblent être interactives à l’intérieur de l’info-bulle.

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

Les API de ce contrôle existent dans l’espace de noms Windows.UI.Xaml.Controls .

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ce contrôle qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer une info-bulle

Ouvrez l’application Galerie WinUI 3 et voyez l’info-bulle en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Une info-bulle doit être affectée à un autre élément d’interface utilisateur qui est son propriétaire. La classe ToolTipService fournit des méthodes statiques pour afficher une info-bulle.

En XAML, utilisez la propriété ToolTipService.Tooltip jointe pour affecter l’info-bulle à un propriétaire.

<Button Content="New" ToolTipService.ToolTip="Create a new document"/>

En code, utilisez la méthode ToolTipService.SetTooltip pour affecter l’info-bulle à un propriétaire.

<Button x:Name="submitButton" Content="New"/>

ToolTip toolTip = new ToolTip();
toolTip.Content = "Create a new document";
ToolTipService.SetToolTip(submitButton, toolTip);

Content

Vous pouvez utiliser n’importe quel objet comme contenu d’une info-bulle. Voici un exemple d’utilisation d’une image dans une info-bulle.

<TextBlock Text="store logo">
    <ToolTipService.ToolTip>
        <Image Source="Assets/StoreLogo.png"/>
    </ToolTipService.ToolTip>
</TextBlock>

Sélection élective

Par défaut, une info-bulle s’affiche centrée au-dessus du pointeur. Le placement n’étant pas limité par la fenêtre de l’application, l’info-bulle peut s’afficher partiellement ou complètement en dehors des limites de cette fenêtre.

Pour les ajustements larges, utilisez la propriété Placement ou la propriété jointe ToolTipService.Placement pour spécifier si l’info-bulle doit être placée au-dessus, en dessous, à gauche ou à droite du pointeur. Vous pouvez définir les propriétés VerticalOffset ou HorizontalOffset pour modifier la distance entre le pointeur et l’info-bulle. Seul l’une des deux valeurs de décalage influence la position finale : VerticalOffset lorsque le positionnement est Top ou Bottom, ou HorizontalOffset lorsque le positionnement est Left ou Right.

<!-- An Image with an offset ToolTip. -->
<Image Source="Assets/StoreLogo.png">
    <ToolTipService.ToolTip>
        <ToolTip Content="Offset ToolTip."
                 Placement="Right"
                 HorizontalOffset="20"/>
    </ToolTipService.ToolTip>
</Image>

Si une info-bulle masque le contenu auquel elle fait référence, vous pouvez ajuster son emplacement avec précision à l’aide de la propriété PlacementRect . PlacementRect ancre la position de l’info-bulle et sert aussi de zone que l’info-bulle ne cache pas dans la mesure où il y a suffisamment d’espace à l’écran pour dessiner l’info-bulle en dehors de cette zone. Vous pouvez spécifier l’origine du rectangle par rapport au propriétaire de l’info-bulle ainsi que la hauteur et la largeur de la zone d’exclusion. La propriété Placement permet de définir si l’info-bulle doit être dessinée au-dessus, en dessous, à gauche ou à droite de PlacementRect.

<!-- An Image with a non-occluding ToolTip. -->
<Image Source="Assets/StoreLogo.png" Height="64" Width="96">
    <ToolTipService.ToolTip>
        <ToolTip Content="Non-occluding ToolTip."
                 PlacementRect="0,0,96,64"/>
    </ToolTipService.ToolTip>
</Image>

Obtenir l’exemple de code