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.
The following example shows how to create a simple tooltip by setting the ToolTip property for a Button control to a text string.
<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>
The following example uses code to generate a ToolTip object. The example creates a ToolTip (tt) and associates it with a Button.
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.
For an example of how to set properties in order to specify the position of tooltip content by using the ToolTip and ToolTipService properties, see Position a ToolTip.
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.
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
.NET Desktop feedback feedback
.NET Desktop feedback is an open source project. Select a link to provide feedback:
Microsoft Graph Toolkit components are flexible for customization. You can change the behavior of components by using attributes. You can also customize component styling by using CSS custom properties to match your app's branding.