Search code examples
windowsxamliconstooltipwinui-3

XAML Information Icon opens TeachingTip

How can I make in XAML WinUI 3 a circled "i" which on hover opens a TeachingTip? Like in the photo:

enter image description here

<TeachingTip Title="Title" Subtitle="Subtitle" Target="{x:Bind InformationIcon}"/>

Attempts:

  1. I used <FontIcon> inside <Border>, but they do not have click events so I can't open the tip in code-behind.
  2. If I use a <Button> with the icon then I can open the tip. But it has hover animation and is not a circle, and all I want is a static "i" encircled.
Solution

  • You can use the standard tooltip, something like that:

    <StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Text="Tags (optional)" />
    <TextBlock
        Margin="10,0,0,0"
        VerticalAlignment="Center"
        FontSize="20"
        Text="🛈" ToolTipService.Placement="Bottom">
        <ToolTipService.ToolTip>
            <Border Margin="-10" Background="Black">
                <TextBlock
                    Margin="10"
                    Foreground="White"
                    Text="Tags are not visible account-wide&#10;Do not include sensitive data."
                    TextWrapping="Wrap" />
            </Border>
        </ToolTipService.ToolTip>
    </TextBlock>
</StackPanel>

    However the tooltip has less features than the WPF one, so there's no way to configure delays.