Skip to main content

ToolTip

The ToolTip is a popup that shows its content when the user hovers over the 'host' control to which it is attached.

Useful properties​

You will probably use these properties most often:

PropertyDescription
ToolTip.TipAttached property for the tooltip contents.
ToolTip.PlacementDefines the placement for the tooltip relative to the host or the pointer. Choose from top, bottom, left, right, anchor and gravity, pointer. The default value is pointer which places the tip content at the position where the pointer stops moving.
ToolTip.HorizontalOffsetThe tooltip horizontal offset from the placement (default 0).
ToolTip.VerticalOffsetThe tooltip vertical offset from the placement (default 20).
ToolTip.ShowDelayThe amount of time the pointer has to be still before the tooltip appears, in milliseconds (default 400).
ToolTip.BetweenShowDelayThe amount of time the tooltip will not show up for after last show, in milliseconds (default 100).
ToolTip.ShowOnDisabledDetermines whether the tooltip should be shown for disabled elements (default false).
ToolTip.ServiceEnabledDetermines whether the tooltip service is enabled (default true).

Events​

EventTypeDescription
ToolTip.ToolTipOpeningCancelRoutedEventArgsRaised when a tooltip is about to open. Set Cancel = true to prevent the tooltip from showing.
ToolTip.ToolTipClosingRoutedEventArgsRaised when a tooltip is about to close.

These are attached routed events. Subscribe in XAML or code:

<Button Content="Hover me"
        ToolTip.Tip="Dynamic tooltip"
        ToolTip.ToolTipOpening="OnToolTipOpening" />
private void OnToolTipOpening(object? sender, CancelRoutedEventArgs e)
{
    // Optionally prevent the tooltip from showing
    if (ShouldSuppressTooltip)
    {
        e.Cancel = true;
    }
}

Examples​

This is a simple text-based tooltip, using default values for the placement and delay properties. Hover over the rectangle in the preview to see the tooltip.

<UserControl xmlns="https://github.com/avaloniaui">
  <Rectangle Fill="Aqua" Height="150" Width="200"
             ToolTip.Tip="This is a rectangle" />
</UserControl>
Preview
Loading Avalonia Preview...

To provide a richer presentation for a tooltip, use a <ToolTip.Tip> element. Hover over the rectangle in the preview to see the tooltip.

<UserControl xmlns="https://github.com/avaloniaui">
  <Rectangle Fill="Aqua" Height="150" Width="200"
             ToolTip.Placement="Bottom">
      <ToolTip.Tip>
        <StackPanel>
          <TextBlock FontSize="16">Rectangle</TextBlock>
          <TextBlock>Some explanation here.</TextBlock>
        </StackPanel>
      </ToolTip.Tip>
  </Rectangle>
</UserControl>
Preview
Loading Avalonia Preview...

See also​

On this page