Partager via

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, appuie et maintient le curseur ou le survole 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).

Note

À 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 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 modération et uniquement lorsqu’elles ajoutent une valeur claire à l’utilisateur qui tente d’accomplir une tâche. Une règle générale est que si l'information est disponible ailleurs dans le même contexte, vous n’avez pas besoin d'une info-bulle. Une infobulle utile expliquera 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 trouveront-ils les astuces agaçantes ou distrayantes ? Si c’est le cas, envisagez d’utiliser une autre solution, y compris en ne faisant rien du tout. Si vous utilisez des astuces à des endroits où elles pourraient distraire, autorisez les utilisateurs à les désactiver.

Recommendations

  • 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 phrases. Les blocs de texte volumineux peuvent être intimidants et l’info-bulle peut expirer avant que l'utilisateur ne termine sa lecture.
  • 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, n’ajoutez pas d’info-bulle sur un bouton qui affiche le même texte que le 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.

Créer une info-bulle

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

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir 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 généraux, utilisez la propriété Placement ou la propriété jointe ToolTipService.Placement pour spécifier si l’info-bulle doit être affiché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 positionnement avec précision en utilisant la propriété PlacementRect. PlacementRect ancre la position de l’info-bulle et sert également de zone que l’info-bulle ne recouvre pas, à condition qu'il y ait suffisamment d’espace sur l’écran pour afficher 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>

UWP et WinUI pour UWP

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 sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence de l’API UWP pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient des informations dont vous avez besoin pour utiliser le contrôle dans une application UWP ou 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 pour UWP 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 angles arrondis. Pour plus d’informations, voir Rayon d’angle.

  • Last updated on