A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element, such as over a Button. This topic introduces the tooltip and discusses how to create and customize tooltip content.
What Is a Tooltip?
When a user moves the mouse pointer over an element that has a tooltip, a window that contains tooltip content (for example, text content that describes the function of a control) appears for a specified amount of time. If the user moves the mouse pointer away from the control, the window disappears because the tooltip content cannot receive focus.
The content of a tooltip can contain one or more lines of text, images, shapes, or other visual content. You define a tooltip for a control by setting one of the following properties to the tooltip content.
Creating a ToolTip
<Button ToolTip="Click to submit your information" Click="SubmitCode" Height="20" Width="50">Submit</Button>
You can also define a tooltip as a ToolTip object. The following example uses XAML to specify a ToolTip object as the tooltip of a TextBox element. Note that the example specifies the ToolTip by setting the FrameworkElement.ToolTip property.
<TextBox HorizontalAlignment="Left">ToolTip with non-text content <TextBox.ToolTip> <ToolTip> <DockPanel Width="50" Height="70"> <Image Source="data\flower.jpg"/> <TextBlock>Useful information goes here.</TextBlock> </DockPanel> </ToolTip> </TextBox.ToolTip> </TextBox>
button = new Button(); button.Content = "Hover over me."; tt = new ToolTip(); tt.Content = "Created with C#"; button.ToolTip = tt; cv2.Children.Add(button);
button = New Button() button.Content = "Hover over me." tt = New ToolTip() tt.Content = "Created with Visual Basic" button.ToolTip = tt cv2.Children.Add(button)
You can also create tooltip content that is not defined as a ToolTip object by enclosing the tooltip content in a layout element, such as a DockPanel. The following example shows how to set the ToolTip property of a TextBox to content that is enclosed in a DockPanel control.
<TextBox> ToolTip with image and text <TextBox.ToolTip> <StackPanel> <Image Source="data\flower.jpg"/> <TextBlock>Useful information goes here.</TextBlock> </StackPanel> </TextBox.ToolTip>
Using the Properties of the ToolTip and ToolTipService Classes
You can customize tooltip content by setting visual properties and applying styles. If you define the tooltip content as a ToolTip object, you can set the visual properties of the ToolTip object. Otherwise, you must set equivalent attached properties on the ToolTipService class.
Styling a ToolTip
You can style a ToolTip by defining a custom Style. The following example defines a Style called
Simple that shows how to offset the placement of the ToolTip and change its appearance by setting the Background, Foreground, FontSize, and FontWeight.
<Style TargetType="ToolTip"> <Setter Property = "HorizontalOffset" Value="10"/> <Setter Property = "VerticalOffset" Value="10"/> <Setter Property = "Background" Value="LightBlue"/> <Setter Property = "Foreground" Value="Purple"/> <Setter Property = "FontSize" Value="14"/> <Setter Property = "FontWeight" Value="Bold"/> </Style>
Using the Time Interval Properties of ToolTipService
Use the InitialShowDelay and ShowDuration properties to specify a delay, typically brief, before a ToolTip appears and also to specify how long a ToolTip remains visible. For more information, see How to: Delay the Display of a ToolTip.
The BetweenShowDelay property determines if tooltips for different controls appear without an initial delay when you move the mouse pointer quickly between them. For more information about the BetweenShowDelay property, see Use the BetweenShowDelay Property.
The following example shows how to set these properties for a tooltip.
<Ellipse Height="25" Width="50" Fill="Gray" HorizontalAlignment="Left" ToolTipService.InitialShowDelay="1000" ToolTipService.ShowDuration="7000" ToolTipService.BetweenShowDelay="2000"> <Ellipse.ToolTip> <ToolTip Placement="Right" PlacementRectangle="50,0,0,0" HorizontalOffset="10" VerticalOffset="20" HasDropShadow="false" Opened="whenToolTipOpens" Closed="whenToolTipCloses" > <BulletDecorator> <BulletDecorator.Bullet> <Ellipse Height="10" Width="20" Fill="Blue"/> </BulletDecorator.Bullet> <TextBlock>Uses the ToolTip Class</TextBlock> </BulletDecorator> </ToolTip> </Ellipse.ToolTip> </Ellipse>