Tooltip

在触发元素上方淡入并滑入的工具提示气泡，即 ToolTip。

示例可交互

Tooltip — Avalonia UIKit

Live demo unavailable

<Panel MinWidth="280" MinHeight="130">
  <StackPanel Spacing="8" HorizontalAlignment="Left" VerticalAlignment="Bottom">
    <Button Content="Hover me" ToolTip.Tip="Tooltip text" HorizontalAlignment="Left" />
    <TextBlock Text="Hover the button to show the tooltip." Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</Panel>

用法

主题覆盖 ToolTip：浮层背景配 1px 边框与阴影，内边距为 2px × 8px，文字 14px，在 150ms 内淡入并向上滑动 4px。在任意控件上设置 ToolTip.Tip 即可。

主题为每个控件设置了显示时机与位置：工具提示在 500ms 后显示（ToolTip.ShowDelay），或在另一个工具提示关闭后的 300ms 内立即显示（ToolTip.BetweenShowDelay），并在触发元素上方居中打开（ToolTip.Placement="Top"）。在控件上设置 ToolTip.Placement 可让工具提示在其他侧打开。

示例

依次为各按钮设置 ToolTip.Placement：默认的上方，然后是下方、左侧与右侧。

方位可交互

Live demo unavailable

<Panel MinWidth="520" MinHeight="170">
  <StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Classes="outline" Content="Top" ToolTip.Tip="Above the trigger" />
    <Button Classes="outline" Content="Bottom" ToolTip.Tip="Below the trigger" ToolTip.Placement="Bottom" />
    <Button Classes="outline" Content="Left" ToolTip.Tip="On the left" ToolTip.Placement="Left" />
    <Button Classes="outline" Content="Right" ToolTip.Tip="On the right" ToolTip.Placement="Right" />
  </StackPanel>
</Panel>

把工具提示用作 icon-only 按钮的标签。

图标按钮可交互

Live demo unavailable

<Panel MinWidth="240" MinHeight="96">
  <StackPanel Orientation="Horizontal" Spacing="4" HorizontalAlignment="Left" VerticalAlignment="Bottom">
    <Button Classes="icon-only ghost" ToolTip.Tip="Copy">
      <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
    </Button>
    <Button Classes="icon-only ghost" ToolTip.Tip="Search">
      <PathIcon Data="{StaticResource UIKit.Icon.Search}" />
    </Button>
    <Button Classes="icon-only ghost" ToolTip.Tip="Notifications">
      <PathIcon Data="{StaticResource UIKit.Icon.Bell}" />
    </Button>
    <Button Classes="icon-only ghost" ToolTip.Tip="Open in browser">
      <PathIcon Data="{StaticResource UIKit.Icon.ExternalLink}" />
    </Button>
  </StackPanel>
</Panel>

Tooltip

#用法

#示例

用法

示例