HTML clipboard Each control in WPF has a Tooltip property that
can be accessed through XAML or code behind. The Tooltip property can host any
kind of controls such as a rectangle, text block, or a panel. In other words, we
can display another window with any number of controls as a tooltip of a
control.
The following code creates a simple tooltip for a
button control.
<Button
Width="100"
Height="30">Click Me
<Button.ToolTip>
<ToolTip>This
is a tooltip test for a button control. You
can
click me if you want but I will do nothing for you.
</ToolTip>
</Button.ToolTip>
</Button>
The output looks like Figure 1.
Figure 1. A simple Tooltip
As I said earlier, a Tooltip can host any number
of controls. For example, in the below code, a button tooltip hosts a StackPanel
with two children StackPanels. First StackPanel hosts an image and a text block
and second StackPanel hosts a larger textblock. The output looks like Figure 2,
which is a fancy tooltip.
<Button
Width="100"
Height="30">Click Me
<Button.ToolTip>
<StackPanel
Background="Honeydew"
Height="200"
Width="200">
<StackPanel
Background="BurlyWood"
Height="30"
Width="200"
Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<Image
VerticalAlignment="Top" Width="30"
Height="30"
Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png"
Name="image1" />
<TextBlock
FontFamily="Aharoni"
FontSize="24"
FontWeight="Bold"
Foreground="Black"
TextWrapping="Wrap"
VerticalAlignment="Top"
Height="30"
HorizontalAlignment="Right"
Width="143">
<Run
FontFamily="Andalus"
FontSize="18"
FontWeight="Normal"
Text="Hello!
Fancy Tip"/>
</TextBlock>
</StackPanel>
<StackPanel
Width="200"
Orientation="Horizontal"
HorizontalAlignment="Left"
VerticalAlignment="Top"
>
<TextBlock
TextWrapping="Wrap"
Foreground="#FFF9F4F4"
TextAlignment="Center"
Background="{x:Null}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Width="181"
Height="98">
<Run
FontFamily="Verdana"
FontSize="11"
FontWeight="Normal"
Foreground="#FF151514"
Text="Format
your tip the way you want and put any image, text or other controls on it.
Also,
you can add more controls in this tip the way you want to format it."/>
</TextBlock>
</StackPanel>
</StackPanel>
</Button.ToolTip>
</Button>
Figure 2. A fancy tooltip
Using this approach, you may design
your tooltips the way you want.
Note: In the above code,
you may want to change the source of the image file by changing the following
code:
Source="C:\Projects\XAML\FancyTooltip\FancyTooltip\samp.png"