#379 – Using a Tooltip As a Magnifier

You can use a tooltip as a magnifier, so that when you hover over a control, it shows an enlarged view of the control.

We define a tooltip to contain a Rectangle that is exactly twice the size of the associated control (using data binding and a value converter).  We then fill the Rectangle with a VisualBrush and bind the Visual property of the VisualBrush to the element that is hosting the tooltip.

    <Window.Resources>
        <loc:DoubleIntConverter x:Key="doubleIntConverter"/>

        <ToolTip x:Key="reflectingTooltip" DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
                 Placement="Center">
            <Rectangle Width="{Binding ActualWidth, Converter={StaticResource doubleIntConverter}}"
                       Height="{Binding ActualHeight, Converter={StaticResource doubleIntConverter}}">
                <Rectangle.Fill>
                    <VisualBrush Visual="{Binding}"/>
                </Rectangle.Fill>
            </Rectangle>
        </ToolTip>
    </Window.Resources>

Using the tooltip:

        <Label Content="Can you read me now?" ToolTip="{StaticResource reflectingTooltip}"
               HorizontalAlignment="Center"/>

The implementation of the value converter is left as an exercise.

#378 – Positioning Tooltips

There are several properties that dictate where a tooltip will be displayed.

By default, the tooltip is positioned just below the mouse pointer, with its left edge lined up with the left side of the mouse pointer.

The PlacementTarget property can be used to position the tooltip relative to a specific control.  By default, this property refers to the control to which the tooltip is attached.

You can set the Placement property to change the logic of how the tooltip’s position is calculated.  It can be set to a number of different values, including:

  • Absolute – absolute screen coordinates, specified by HorizontalOffset and VerticalOffset
  • Relative – relative to upper left of control, specified by HorizontalOffset and VerticalOffset
  • Bottom, Top, Left, Right – aligned with edge of control

  • Center – centered on control

  • Mouse – aligned with the current mouse pointer (the default)

The tooltip can be more precisely positioned using the HorizontalOffset and VerticalOffset properties.

#376 – Getting Text to Wrap in a Tooltip

When you specify the value of a tooltip by setting the Tooltip property for a control, a popup window for the tooltip is created and the window contains a single label.  By default, this label does not wrap, but displays in a single long line.

If you want the text in a tooltip to wrap, you can specify an explicit Tooltip control in XAML and set it up to contain a TextBlock.  The TextBlock has a TextWrapping property that lets you wrap the text.

        <TextBox Text="Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried."
            Width="100" Margin="10">
            <TextBox.ToolTip>
                <ToolTip DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}">
                    <TextBlock Text="{Binding Text}" TextWrapping="Wrap" Width="200"/>
                </ToolTip>
            </TextBox.ToolTip>
        </TextBox>

#375 – Binding Something in a Tooltip to a Property on the Parent Control

You can use data binding to bind the value of a simple Tooltip property to some other property of the control.  But you might also want to use data binding when you create a Tooltip as a child element in XAML.

Suppose you want a Tooltip to include several labels and you want the Content of the second label to bind back to a property on the parent control.

You can do this by using the PlacementTarget of the Tooltip to find its parent and then set the DataContext of the Tooltip.

        <TextBox Text="Now is the winter of our discontent etc"
            Width="100" Margin="10">
            <TextBox.ToolTip>
                <ToolTip DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}">
                    <StackPanel>
                        <Label FontWeight="Bold" Content="Full Text"/>
                        <Label Content="{Binding Text}"/>
                        <Label Content="--Gloster, in Richard III (Act I, Scene I)"/>
                    </StackPanel>
                </ToolTip>
            </TextBox.ToolTip>
        </TextBox>

#374 – Using a Tooltip to Display the Full Contents of a TextBox

It might often be the case that a TextBox control is not wide enough to display all of its text (the current value of its Text property).

The user could click in the TextBox control and move the cursor in order to see all of the text, but it would be handy to display the full contents in a tooltip.

You can set up a tooltip to display the full text of the Text property by setting the Tooltip property of the TextBox and using data binding to bind its value to the Text property.

        <TextBox Text="Now is the winter of our discontent Made glorious summer by this sun of York; And all the clouds that lour'd upon our house In the deep bosom of the ocean buried."
            ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}"
            Width="100" Margin="10"/>

#373 – Creating More Complex Tooltips

You typically set a tooltip as a simple textual label, setting the value of the Tooltip property for a control to a text string.  You can also define a more complex tooltip that includes several controls.  In the example below, hovering over one of the tractor brands causes a tooltip to be displayed that shows the logo for the brand.

A tooltip is actually a popup window represented by an instance of the Tooltip control.  Because it inherits from ContentControl, its content can be any .NET object.

You can specify a tooltip’s content in XAML as a child element of the parent control.  The content must be a single element, but can be a container that in turn contains other elements.

            <RadioButton Content="Deere"
                         VerticalAlignment="Center" Margin="5">
                <RadioButton.ToolTip>
                    <StackPanel>
                        <Label Content="John Deere" FontWeight="Bold"/>
                        <Image Source="Deere.jpg"/>
                        <Label Content="Nothing runs like a Deere"/>
                    </StackPanel>
                </RadioButton.ToolTip>
            </RadioButton>
/RadioButton>

#372 – Defining Tooltips for GUI Elements

A tooltip is a small popup that appears when a user hovers the mouse pointer over some user interface element.  It’s typically used to provide further information about the element that the user hovers over.

In WPF, you can set a textual tooltip by setting the Tooltip property of a control (inherited from FrameworkElement or FrameworkContentElement class).

    <StackPanel>
        <Label Content="Buy a Tractor:" />
        <StackPanel Orientation="Horizontal" >
            <Label Content="Brand:"/>
            <RadioButton Content="Deere" ToolTip="Nothing runs like a Deere"/>
            <RadioButton Content="New Holland" ToolTip="Smart Design. Built Strong. Farm Raised."/>
            <RadioButton Content="Kubota" ToolTip="The Orange Way"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" >
            <Label Content="Series:" />
            <ComboBox SelectedIndex="0" >
                <ComboBoxItem Content="BX Series" ToolTip="Little guy"/>
                <ComboBoxItem Content="B Series" ToolTip="18-32hp, smaller landscaping"/>
                <ComboBoxItem Content="TLB Series" ToolTip="21-59hp, professional"/>
                <ComboBoxItem Content="L Series" ToolTip="30-59HP, larger landscaping"/>
                <ComboBoxItem Content="M Series" ToolTip="43-135hp, all-purpose agricultural"/>
            </ComboBox>
        </StackPanel>
        <Button Content="Buy It" ToolTip="Charge my credit card and send me my tractor" />
    </StackPanel>