how to make tooltip move along with mouse?

Question

Hello everyone,

I am using Silverlight 3 + VSTS 2008. I have a image (Multiscale image control) and I place tooltip on this image. The function of Tooltip works fine. Since the image is big (about 500 * 500 size), and since end user could move mouse on the picture, and I want to display tooltip position along with the mouse (i.e. when mouse moves, I want to tooltip move along with the mouse). Currently, the tooltip displays at a fixed position.

Here is my current XAML code, any ideas how to solve this issue?

      <MultiScaleImage x:Name="msi" Height="500" Width="500">
            <ToolTipService.ToolTip>
                <ToolTip Content="Here is a tool tip" Name="DeepZoomToolTip"></ToolTip>
            </ToolTipService.ToolTip>
        </MultiScaleImage>

thanks in advance, George

Answer 1

The tooltip control is designed to pop up roughly where the mouse meets the element to which it's bound, and can't respond to move events. Below is a custom tooltip example. I added the background and the z-index so that the TextBlock would appear over the image. The offset from the mouse position keeps the tooltip away from the mouse cursor, so that the movement is animated smoothly.

XAML:

<UserControl x:Class="ImageEditor.TestControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="800">
    <Canvas x:Name="MainCanvas">
        <Border x:Name="tt" Background="Gray" Visibility="Collapsed" Canvas.ZIndex="10">
            <TextBlock x:Name="txtTooltip" Width="90" Height="20" Text="This is a tooltip" ></TextBlock>    
        </Border>

        <Image x:Name="theImage"  Source="images/image.jpg" Width="300" MouseEnter="theImage_MouseEnter" 
        MouseMove="theImage_MouseMove" MouseLeave="theImage_MouseLeave">

        </Image>

    </Canvas>

</UserControl>

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ImageEditor
{
    public partial class TestControl : UserControl
    {
        private bool _tooltipVisible = false;
        public TestControl()
        {
            InitializeComponent();
        }

        private void theImage_MouseMove(object sender, MouseEventArgs e)
        {
            if (_tooltipVisible)
            {
                tt.SetValue(Canvas.TopProperty, e.GetPosition(theImage).Y - (5 + txtTooltip.Height));
                tt.SetValue(Canvas.LeftProperty, e.GetPosition(theImage).X - 5);
            }
        }

        private void theImage_MouseEnter(object sender, MouseEventArgs e)
        {
            _tooltipVisible = true;
            tt.Visibility = Visibility.Visible;
        }

        private void theImage_MouseLeave(object sender, MouseEventArgs e)
        {
            _tooltipVisible = false;
            tt.Visibility = Visibility.Collapsed;
        }
    }
}

Answer 2

I ended up having a similar issue and solved the issue by using a popup. This post contained the core solution. Here is the suggested XAML from the other post:

<Canvas x:Name="LayoutRoot" Background="White">
<Image Source="/pretty-pretty.png" MouseMove="Image_MouseMove" MouseLeave="Image_MouseLeave"/>
<Popup Name="DeepZoomToolTip">
   <Border CornerRadius="1" Padding="1" Background="Azure" IsHitTestVisible="False">
       <TextBlock Text="Here is a tool tip" />
   </Border>
</Popup>
</Canvas>

And here is the suggested, this would go in the code behind:

private void Image_MouseMove(object sender, MouseEventArgs e)
{
    DeepZoomToolTip.IsOpen = true;
    DeepZoomToolTip.HorizontalOffset = e.GetPosition(LayoutRoot).X;
    DeepZoomToolTip.VerticalOffset = e.GetPosition(LayoutRoot).Y;
}

private void Image_MouseLeave(object sender, MouseEventArgs e)
{
    DeepZoomToolTip.IsOpen = false;
}