Delen via

Tooltip

Een tooltip is een pop-up die aanvullende informatie biedt over een ander object of besturingselement. Knopinfo wordt automatisch weergegeven wanneer de gebruiker de focus verplaatst naar, indrukt en vasthoudt of de aanwijzer boven de bijbehorende controle beweegt. De toolhint verdwijnt wanneer de gebruiker de focus verplaatst, stopt met het ingedrukt houden, of stopt met het aanwijzen van de aanwijzer op het bijbehorende besturingselement (tenzij de aanwijzer naar de toolhint beweegt).

Opmerking

Vanaf Windows 11 versie 21H2 kan een tooltip ook worden gesloten door op de Ctrl-toets te drukken.

Een knopinfo

Is dit de juiste controle?

Gebruik knopinfo om meer informatie over een besturingselement weer te geven voordat u de gebruiker vraagt een actie uit te voeren. Tooltips moeten spaarzaam worden gebruikt en alleen wanneer ze duidelijke waarde toevoegen voor de gebruiker die een taak probeert te voltooien. Een vuistregel is dat als de informatie elders in dezelfde ervaring beschikbaar is, u geen tooltip nodig hebt. Een waardevolle tooltip zal een onduidelijke actie verduidelijken.

Wanneer moet u een tooltip gebruiken? Houd rekening met deze vragen om te bepalen:

  • Moet informatie zichtbaar worden wanneer de muisaanwijzer erboven zweeft? Als dat niet het geval is, gebruikt u een andere controle. Geef tips alleen weer als gevolg van gebruikersinteractie en geef ze nooit zelf weer.

  • Heeft een besturingselement een tekstlabel? Als dat niet het is, gebruikt u knopinfo om het label op te geven. Het is een goede UX-ontwerppraktijk om de meeste elementen inline te labelen en hierbij zijn tooltips niet nodig. Werkbalkbedieningselementen en opdrachtknoppen met alleen pictogrammen hebben tooltips nodig.

  • Profiteert een object van een beschrijving of verdere informatie? Zo ja, gebruik dan een tooltip. Maar de tekst moet aanvullend zijn, dat wil niet van essentieel belang zijn voor de primaire taken. Als het essentieel is, plaatst u deze rechtstreeks in de gebruikersinterface, zodat gebruikers deze niet hoeven te detecteren of te zoeken.

  • Is de aanvullende informatie een fout, waarschuwing of status? Zo ja, gebruik dan een ander UI-element, zoals een flyout.

  • Moeten gebruikers met de tip interageren? Zo ja, gebruik dan een ander bedieningselement. Gebruikers kunnen geen interactie hebben met tips omdat het bewegen van de muis ervoor zorgt dat ze verdwijnen.

  • Moeten gebruikers de aanvullende informatie afdrukken? Zo ja, gebruik dan een ander bedieningselement.

  • Vinden gebruikers de tips vervelend of afleidend? Zo ja, overweeg dan om een andere oplossing te gebruiken, inclusief helemaal niets te doen. Als u tips gebruikt waar ze mogelijk afleiden, staat u gebruikers toe ze uit te schakelen.

Aanbevelingen

  • Gebruik knopinfo spaarzaam (of helemaal niet). Tooltips zijn een onderbreking. Een tooltip kan net zo afleiden als een pop-up, dus gebruik hem niet, tenzij hij een aanzienlijke meerwaarde biedt.
  • Houd de knopinfotekst beknopt. Tooltips zijn perfect voor korte zinnen en zinsfragmenten. Grote tekstblokken kunnen overweldigend zijn en de tooltips kunnen een time-out geven voordat de gebruiker het lezen heeft voltooid.
  • Maak nuttige, aanvullende tooltiptekst. Knopinfotekst moet informatief zijn. Maak het niet duidelijk of herhaal gewoon wat er al op het scherm staat. Omdat knopinfotekst niet altijd zichtbaar is, moet het aanvullende informatie zijn die gebruikers niet hoeven te lezen. Communiceer belangrijke informatie met behulp van zelfverklarende besturingslabels of direct aanwezige aanvullende tekst.
  • Gebruik afbeeldingen indien van toepassing. Soms is het beter om een afbeelding in een tooltip te gebruiken. Wanneer de gebruiker bijvoorbeeld de muisaanwijzer boven een hyperlink houdt, kunt u knopinfo gebruiken om een voorbeeld van de gekoppelde pagina weer te geven.
  • Toetsenbord sneltoetsen worden standaard weergegeven in tooltips. Als u uw eigen tooltip toevoegt, moet u ervoor zorgen dat deze informatie bevat over de sneltoetsen die beschikbaar zijn.
  • Gebruik geen tooltip om tekst weer te geven die al zichtbaar is in de UI. Plaats bijvoorbeeld geen tooltip op een knop met dezelfde tekst als op de knop.
  • Plaats geen interactieve besturingselementen in de tooltip.
  • Plaats geen afbeeldingen die lijken alsof ze interactief zijn in de knopinfo.

Een tooltip maken

Open de WinUI 3 Gallery-app en bekijk de tooltip in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Er moet een ToolTip worden toegewezen aan een ander UI-element waarvan het de eigenaar is. De klasse ToolTipService biedt statische methoden om knopinfo weer te geven.

Gebruik in XAML de ToolTipService.Tooltip gekoppelde eigenschap om de ToolTip aan een eigenaar toe te wijzen.

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

Gebruik in code de methode ToolTipService.SetToolTip om de ToolTip toe te wijzen aan een eigenaar.

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

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

Inhoud

U kunt elk object gebruiken als de Inhoud van een ToolTip. Hier volgt een voorbeeld van het gebruik van een Afbeelding in een tooltip.

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

Plaatsing

Standaard wordt een tooltip in het midden boven de aanwijzer weergegeven. De plaatsing wordt niet beperkt door het app-venster, dus de Knopinfo kan gedeeltelijk of volledig buiten de app-venstergrenzen worden weergegeven.

Voor algemene aanpassingen gebruikt u de eigenschap Placement of de gekoppelde eigenschap ToolTipService.Placement om op te geven of de knopinfo boven, onder, links of rechts van de aanwijzer moet verschijnen. U kunt de eigenschappen VerticalOffset of HorizontalOffset instellen om de afstand tussen de cursor en de ToolTip te wijzigen. Slechts een van de twee offsetwaarden heeft invloed op de uiteindelijke positie: VerticalOffset wanneer plaatsing boven of onder, HorizontalOffset is wanneer plaatsing links of rechts is.

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

Als een tooltip de inhoud bedekt waarnaar het verwijst, kunt u de plaatsing nauwkeurig aanpassen met behulp van de eigenschap PlacementRect. PlacementRect verankert de positie van de ToolTip en fungeert ook als een gebied dat de ToolTip niet zal blokkeren, mits er voldoende schermruimte beschikbaar is om de ToolTip buiten dit gebied weer te geven. U kunt het beginpunt van de rechthoek opgeven ten opzichte van de eigenaar van de ToolTip, en de hoogte en de breedte van het uitsluitingsgebied. De eigenschap Plaatsing bepaalt of de ToolTip boven, onder, links of rechts van de PlacementRect moet worden weergegeven.

<!-- 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 en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de Windows.UI.Xaml.Controls naamruimte.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.