#378 – Positioning Tooltips

September 2, 2011 1 Comment

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.

Advertisement

Filed under Controls Tagged with , , , ,

#377 – Reuse Tooltips by Defining Them as Resources

September 1, 2011 2 Comments

Because tooltips are instances of the Tooltip control, you can create tooltip instances in a resource dictionary and then reuse them for multiple controls.

Below is an example of a tooltip that uses data binding to display the full text of a TextBox control.

    <Window.Resources>
        <!-- Standard tooltip for TextBox controls, displays Text property of parent control in a TextBlock -->
        <ToolTip x:Key="textBlockTooltip" DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}">
            <StackPanel>
                <Label FontWeight="Bold" Content="Full Text"/>
                <TextBlock Text="{Binding Text}" TextWrapping="Wrap" Width="200"/>
            </StackPanel>
        </ToolTip>
    </Window.Resources>

We can then use this tooltip on any TextBox control.

        <TextBox Text="Now is the winter of our discontent etc"
            Width="100" Margin="10" ToolTip="{StaticResource textBlockTooltip}"/>
        <TextBox Text="All the world's a stage etc"
            Width="100" Margin="10" ToolTip="{StaticResource textBlockTooltip}"/>


Filed under Controls Tagged with , , ,

#372 – Defining Tooltips for GUI Elements

August 25, 2011 3 Comments

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>

Filed under Controls Tagged with , , ,