Info-bulles

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 sur et maintient ou pointe le pointeur sur le contrôle associé. L’info-bulle disparaît lorsque l’utilisateur déplace le focus, arrête d’appuyer dessus ou arrête de pointer le pointeur sur le contrôle associé (sauf si le pointeur se déplace vers l’info-bulle).

Est-ce le contrôle approprié ?

Utilisez une info-bulle pour afficher plus d’informations sur un contrôle avant de demander à l’utilisateur d’effectuer une action. Les info-bulles doivent être utilisées avec parcimonie et uniquement lorsqu’elles ajoutent une valeur distincte pour l’utilisateur qui tente d’effectuer une tâche. Une règle de pouce est que si les informations sont disponibles ailleurs dans la même expérience, vous n’avez pas besoin d’une info-bulle. Une info-bulle précieuse clarifiera une action peu claire.

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

• Les informations doivent-elles devenir visibles lors du passage du pointeur ? Sinon, utilisez un autre contrôle. Affichez des conseils uniquement en raison de l’interaction de l’utilisateur, et ne les affichez jamais par eux-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 fournir l’étiquette. Il s’agit d’une bonne pratique de conception d’expérience utilisateur pour étiqueter la plupart des contrôles inline et pour ceux-ci, vous n’avez pas besoin d’info-bulles. Les contrôles de barre d’outils et les boutons de commande affichant uniquement les icônes ont besoin d’info-bulles.

• 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, placez-le directement dans l’interface utilisateur afin que les utilisateurs n’aient pas à le découvrir ou à le rechercher.

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

• Les utilisateurs doivent-ils interagir avec l’info-bulle ? Dans ce cas, utilisez un autre contrôle. Les utilisateurs ne peuvent pas interagir avec des conseils, car le déplacement de la souris les rend disparus.

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

• Les utilisateurs pourraient-ils être ennuyés ou gênés par les info-bulles ? Si c’est le cas, envisagez d’utiliser une autre solution, y compris en ne faisant rien du tout. Si vous utilisez des conseils où ils peuvent être distraits, autorisez les utilisateurs à les désactiver.

Recommandations

• Utilisez des info-bulles avec parcimonie (ou pas du tout). Les info-bulles sont une interruption. Une info-bulle peut être aussi distraire qu’une fenêtre contextuelle. N’utilisez donc pas ces info-bulles, sauf si elles ajoutent une valeur significative.
• Conservez le texte d’info-bulle concis. Les info-bulles sont parfaites pour les phrases courtes et les fragments de phrase. Les blocs de texte volumineux peuvent être écrasants et l’info-bulle peut expirer avant la fin de la lecture de l’utilisateur.
• Créez un texte d’info-bulle utile et supplémentaire. Le texte d’info-bulle doit être informatif. Ne le rendez pas évident ou répétez simplement ce qui est déjà à l’écran. Étant donné que le texte d’info-bulle n’est pas toujours visible, il doit s’agir d’informations supplémentaires que les utilisateurs n’ont pas à lire. Communiquez des informations importantes à l’aide d’étiquettes de contrôle explicites ou d’un texte supplémentaire sur place.
• Utilisez des images le cas échéant. Il est parfois préférable d’utiliser une image dans une info-bulle. Par exemple, lorsque l’utilisateur pointe 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 par défaut dans les info-bulles. Si vous ajoutez votre propre info-bulle, assurez-vous qu’elle inclut des informations sur les accélérateurs clavier disponibles.
• N’utilisez pas d’info-bulle pour afficher le texte déjà visible dans l’interface utilisateur. Par exemple, ne placez pas d’info-bulle sur un bouton qui affiche le même texte que celui du bouton.
• Ne placez pas de contrôles interactifs dans l’info-bulle.
• Ne placez pas d’images qui ressemblent à des images interactives dans l’info-bulle.

UWP et 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 fonctionnalités les plus récents pour tous les contrôles. WinUI version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis. Pour plus d’informations, consultez Rayons des angles.

Créer une info-bulle

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);

Contenu

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>

Placement

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 il fait référence, vous pouvez ajuster son positionnement précisément à 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

• Exemple de la galerie WinUI : consultez tous les contrôles XAML dans un format interactif.

Articles connexes

• ToolTip, classe