Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.
Recent comments

As well as demonstrating how to create a simple Tooltip control for your application, this post will also show you how to get/set the absolute position of a control in your application even if it is not a Canvas control.

The idea of tooltip is really to display some information such as images or text, when you hover the mouse on a control, and hide when you hover out.

To this, all we need to do is to change the Visibility of our control which contains that information to visible/collapse when the mouse if hovered/left.

I am going to put my information in a separate xaml file called Tooltip.xaml.


<UserControl x:Class="SilverlightPositioningNoneCanvasControl.Tooltip"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="70" Height="40">
    <Grid x:Name="LayoutRoot" Background="Pink"  Width="70" Height="40">
        <TextBlock Text="My Tooltip" Foreground="Chocolate"
        VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
</UserControl>

I will then add a reference to the tooltip in my MainPage.xaml file with Visibility set to Collapsed.


<UserControl x:Class="SilverlightPositioningNoneCanvasControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SilverlightPositioningNoneCanvasControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="300" d:DesignHeight="280">
  <Grid x:Name="LayoutRoot" Width="300" Height="280" Background="Azure">
        <TextBlock x:Name="tb_Tooltip" Text="Hover me" Margin="40" Width="54"
        Height="14" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <TextBlock x:Name="tb_Tooltip2" Text="Hover me" Margin="40" Width="54"
        Height="14" HorizontalAlignment="Right"  VerticalAlignment="Bottom"/>
        <local:Tooltip x:Name="TooltipWindow" Visibility="Collapsed"
        VerticalAlignment="Top" HorizontalAlignment="Left" />
  </Grid>
</UserControl>

Now from my code behind (MainPage.xaml.cs) I can easily control the Visibility of my tooltip control by using MouseEnter and MouseLeave events.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    tb_Tooltip.MouseEnter += new MouseEventHandler(tb_tooltip_MouseEnter);
    tb_Tooltip.MouseLeave += new MouseEventHandler(tb_Tooltip_MouseLeave);

    tb_Tooltip2.MouseEnter += new MouseEventHandler(tb_tooltip_MouseEnter);
    tb_Tooltip2.MouseLeave += new MouseEventHandler(tb_Tooltip_MouseLeave);
}

private void tb_Tooltip_MouseLeave(object sender, MouseEventArgs e)
{
    TooltipWindow.Visibility = Visibility.Collapsed;
}

private void tb_tooltip_MouseEnter(object sender, MouseEventArgs e)
{
    TooltipWindow.Visibility = Visibility.Visible;
}

As you can see from the screen shot above, the tooltip appears at the top left corner of the application if you hover your mouse on any of the "Hover me" text. So what I am going to do, is to capture the position of the "Hover me" text which the mouse is hovering, and make some calculations to workout where to display my tooltip window, and finally reposition my tooltip control before I set its visibility to Visible:

private void tb_tooltip_MouseEnter(object sender, MouseEventArgs e)
{
    TextBlock tb = sender as TextBlock;
    GeneralTransform transform = tb.TransformToVisual(LayoutRoot);
    Point position = transform.Transform(new Point(0, 0));
    double senderHeight = tb.ActualHeight;
    double senderWidth = tb.ActualWidth;

    double x = position.X;
    double y = position.Y;

    int gap = 3;

    if (x + TooltipWindow.Width + senderWidth + gap > LayoutRoot.ActualWidth)
    {
        x = position.X - TooltipWindow.Width - gap;
    }
    else
    {
        x = position.X + senderWidth + gap;
    }

    if (position.Y + senderHeight + TooltipWindow.Height >
    LayoutRoot.ActualHeight)
    {
        y = position.Y - TooltipWindow.Height + tb.Height / 2;
    }
    else
    {
        y = position.Y + tb.Height / 2;
    }

    TooltipWindow.Margin = new Thickness(x, y, 0, 0);

    TooltipWindow.Visibility = Visibility.Visible;
}

and the result for hovering on both "Hover me" text:

As you can see, the tooltip is displayed on the bottom-right of the top-left text and on the top-left of the bottom text when you hover the mouse on them. This is done by some simple calculation and comparing the final X and Y positions to the Width and Height of the main application's container control, in this case a Grid called LayoutRoot.

In order to get the coordinates of the "Hover me" text, I first had to have a transform object, so I used .TransformToVisual method and passed it the control that contains my TextBlock (LayoutRoot). I then used .Transform method to get the current position of my GeneralTransform opbject according to the very top left position of my LayoutRoot container.

Finally I set the position of my tooltip by changing its margin with new X and Y values.

Download the working version of the entire project from here

Posted by Damon Serji on 1. September 2009 19:06 under: Basic
 with 1 Comments