feat: add tooltip. arrow is not supported as there is not indicator of placement on tooltip control itself.

demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml

@@ -0,0 +1,93 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ToolTipDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Tip="This is a ToolTip">
+            <TextBlock>Hover Here</TextBlock>
+        </Border>
+        <ToggleSwitch
+            Margin="5"
+            Content="ToolTip Open"
+            IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}" />
+        <Border
+            Name="Border"
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Bottom">
+            <ToolTip.Tip>
+                <StackPanel>
+                    <TextBlock Classes="h1">ToolTip</TextBlock>
+                    <TextBlock Classes="h2">A control which pops up a hint when a control is hovered</TextBlock>
+                </StackPanel>
+            </ToolTip.Tip>
+            <TextBlock>ToolTip bottom placement</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Top"
+            ToolTip.Tip="Hello">
+            <Border.Styles>
+                <Style Selector="Border">
+                    <Style.Animations>
+                        <Animation IterationCount="Infinite" Duration="0:0:2">
+                            <KeyFrame KeyTime="0:0:0">
+                                <Setter Property="ToolTip.HorizontalOffset" Value="0" />
+                                <Setter Property="ToolTip.VerticalOffset" Value="-50" />
+                            </KeyFrame>
+                            <KeyFrame KeyTime="0:0:2">
+                                <Setter Property="ToolTip.HorizontalOffset" Value="100" />
+                                <Setter Property="ToolTip.VerticalOffset" Value="50" />
+                            </KeyFrame>
+                        </Animation>
+                    </Style.Animations>
+                </Style>
+            </Border.Styles>
+            <TextBlock>Moving offset</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Top"
+            ToolTip.Tip="Hello">
+            <TextBlock>Top</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Left"
+            ToolTip.Tip="Hello">
+            <TextBlock>Left</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Right"
+            ToolTip.Tip="Hello">
+            <TextBlock>Right</TextBlock>
+        </Border>
+        <Border
+            Margin="5"
+            Padding="50,10"
+            Background="Yellow"
+            ToolTip.Placement="Bottom"
+            ToolTip.Tip="Hello">
+            <TextBlock>Bottom</TextBlock>
+        </Border>
+    </StackPanel>
+</UserControl>

demo/Semi.Avalonia.Demo/Pages/ToolTipDemo.axaml.cs

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ToolTipDemo : UserControl
+{
+    public ToolTipDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -78,6 +78,9 @@
         <TabItem Header="ToggleSwitch">
             <pages:ToggleSwitchDemo />
         </TabItem>
+        <TabItem Header="ToolTip">
+            <pages:ToolTipDemo />
+        </TabItem>
         <TabItem Header="TreeView">
             <pages:TreeViewDemo />
         </TabItem>

src/Semi.Avalonia/Controls/Controls.axaml

@@ -31,6 +31,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Tooltip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />

src/Semi.Avalonia/Controls/Tooltip.axaml

@@ -0,0 +1,41 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type ToolTip}" TargetType="ToolTip">
+        <Setter Property="Foreground" Value="{DynamicResource ToolTipForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ToolTipBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ToolTipBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ToolTipBorderThickness}" />
+        <Setter Property="Padding" Value="{DynamicResource ToolTipPadding}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource ToolTipMaxWidth}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ToolTipCornerRadius}" />
+        <Setter Property="Opacity" Value="0" />
+        <Setter Property="Transitions">
+            <Transitions>
+                <DoubleTransition Property="Opacity" Duration="0:0:0.1" />
+            </Transitions>
+        </Setter>
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToolTip">
+                <Border
+                    Name="PART_LayoutRoot"
+                    Margin="0,-1,0,0"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        MaxWidth="{TemplateBinding MaxWidth}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        TextBlock.TextWrapping="Wrap" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:open">
+            <Setter Property="Opacity" Value="1" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Light.axaml

@@ -23,8 +23,10 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Tooltip.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />
+
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Tooltip.axaml

@@ -0,0 +1,14 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <!--  Add Resources Here  -->
+    <PathGeometry x:Key="ToolTipTriangleGlyph">M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z</PathGeometry>
+    <SolidColorBrush x:Key="ToolTipBackground" Color="#41464C" />
+    <SolidColorBrush x:Key="ToolTipForeground" Color="White" />
+    <SolidColorBrush x:Key="ToolTipBorderBrush" Color="Transparent" />
+    <CornerRadius x:Key="ToolTipCornerRadius">6</CornerRadius>
+    <Thickness x:Key="ToolTipPadding">12 8</Thickness>
+    <sys:Double x:Key="ToolTipMaxWidth">320</sys:Double>
+    <Thickness x:Key="ToolTipBorderThickness">0</Thickness>
+</ResourceDictionary>