ToolTip Positioning

Hi Dr. WPF,

I have a Window which is filled with multiple images shown on it side-by-side and I have a need to show a popup window when somebody hover overs an image element. Please note that it is not really a new window but somewhat like a tooltip (but not exactly that). The popup will contain a bigger version of the image they hovered over originally and if they move their mouse over another image, the popup will contain that image at that time and will move over the image the user last hovered over.

Can you please help me with this? I have tried playing with the “Popup” element and the “Tooltip” element but have not found a workable solution yet – I was not able to place the tooltip at the location I wanted (it always appeared a little below the mouse cursor).

Thanks,
Paras
 

 

Hi Paras,

I couldn’t resist the opportunity to answer your question online, since the sample I came up with fits so nicely with the ItemsControl series I just started, ItemsControl:  A to Z.  (Yeah, I know thats not the point of your question, but still…)

Here are the key properties to use when you are positioning a Popup:

  • Placement
  • PlacementTarget
  • PlacementRectangle
  • VerticalOffset
  • HorizontalOffset

These are explained fairly well in this article in the docs.  There are also a couple of application samples in the docs you can download here and here.  But since you just want something quick…

Below you will find a very simple sample that implements the scenario you describe above using a ToolTip.  You should be able to paste the XAML directly into XamlPad.  Note that the popups may be slow since the images are being pulled across the web.  For a more performant version, you can update the strings in the Items collection to point at local files on your hard drive. 

This example uses the Placement property on the ToolTip with a value of “Bottom” combined with the HorizontalOffset and VerticalOffset properties to further displace the ToolTip.  You can play with the values in XamlPad until you find what you like.


<Grid xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:sys="clr-namespace:System;assembly=mscorlib">
 
  <Grid.Resources>

    <ControlTemplate x:Key="ICWithScrollingWrapPanel"
        TargetType="{x:Type ItemsControl}">
      <Border Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">
        <ScrollViewer Margin="{TemplateBinding Padding}">
          <WrapPanel IsItemsHost="True" />
        </ScrollViewer>
      </Border>
    </ControlTemplate>

    <ToolTip x:Key="ImageToolTip" Placement="Bottom"
        HorizontalOffset="20" VerticalOffset="5">
      <Grid Background="Gray">
        <Image Source="{Binding}" />
      </Grid>
    </ToolTip>

    <DataTemplate x:Key="ImageTemplate">
      <Image Width="100" MaxHeight="100" Margin="5"
          ToolTip="{StaticResource ImageToolTip}"
          Source="{Binding}" />
    </DataTemplate>

  </Grid.Resources>

  <ItemsControl Width="355" Height="200" Background="LightGray"
      BorderBrush="Black" BorderThickness="1" Padding="2"
      Template="{StaticResource ICWithScrollingWrapPanel}"
      ItemTemplate="{StaticResource ImageTemplate}">
    <sys:String>http://www.microsoft.com/presspass/images/gallery/campus/bldg10_flags_web.jpg</sys:String>
    <sys:String>http://techfreep.com/images/googleplex.jpg</sys:String>
    <sys:String>http://www.sfgate.com/c/pictures/2006/12/24/bu_earns_yahoo_ny.jpg</sys:String>
    <sys:String>http://img.groundspeak.com/waymarking/b696fde2-62b8-426c-81dd-4e3ae6836402.jpg</sys:String>
    <sys:String>http://www.svdaily.com/applehq.jpg</sys:String>
    <sys:String>http://www.nextcomputers.org/NeXTfiles/Images/History/NeXT_Buildings/redwood02.jpg</sys:String>
    <sys:String>http://explorer.altopix.com/uploads/hz166e.jpg</sys:String>
    <sys:String>http://www.ti.com/corp/graphics/press/image/on_line/co1772.jpg</sys:String>
    <sys:String>http://www.freefotoexchange.netsons.org/data/510/61121758627-1.jpg</sys:String>
  </ItemsControl>

</Grid>

 
Hope this helps!

Best regards,
Dr. WPF

7 Responses to “ToolTip Positioning”

  1. Paras Wadehra says:

    Hello Dr. WPF. In this example if I move over the tooltip from the actual image in the grid, the tooltip disappears. I even made the tooltip display over the current image but still the tooltip disappeared as soon as my mouse went out of the bounds of the image even though it was still on the tooltip. I wanted the popup/tooltip to display while I am hovered over that and show another image in the popup/tooltip when I hover over it. So I ended up achieving what I needed using another window and assigning it the image I want to show and then making that window a child of the current window and positioning it where I want. Thanks, Paras Wadehra. Create your own blog at http://www.paras.2ya.com/

  2. Dr. WPF says:

    Hi Paras, You can achieve the same effect using a Popup in your item template and binding its PlacementTarget property to the TemplatedParent and binding its IsOpen property to the IsMouseOver property on the TemplatedParent. This will save you from having to manage the Window. The Placement and offset properties would work exactly the same as in the above sample.

  3. Dr. WPF says:

    Hi Paras, You can achieve that effect by using a custom container template for your ItemsControl. Use an IsMouseOver trigger to apply a ScaleTransform to the RenderTransform property of the container. You will want to set the RenderTransformOrigin to 0.5,0.5 on the container. If you have any trouble implementing this, drop me an email and I’ll put together a sample.

  4. Paras Wadehra says:

    Thanks again Dr. WPF for the reply.

    I would greatly appreciate if you can put together a sample project for the same for me.

    Regards,
    Paras

  5. baljet says:

    Can anyone let me know if its possible to display tooltip for the control when after the mouse leaves the control in wpf??

  6. Dr. WPF says:

    Hi Baljet,

    The ToolTip class contains a lot of built-in functionality that you would have to work around to meet your needs. However, you can simply use a Popup and then you have full control over when your tip is displayed (via the IsOpen property).

    Cheers,
    -dw