[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Expressions
  [Expand]Behaviors
  [Expand]Application Appearance and Skin Colors
  [Expand]Filtering UI Context
   Find Panel Syntax
  [Expand]Graphics Performance and High DPI
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML-inspired Text Formatting
  [Expand]Menus
  [Collapse]Tooltips
    How to: Display a Tooltip for a Particular Visual Element
    How to: Display a Hyperlink in a Tooltip
  [Expand]Save and Restore Layouts
   Clipboard - Copy and Paste Operations. Data Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Tooltips

DevExpress controls support tooltips. A tooltip is automatically displayed when the mouse pointer is over a control. Controls can also display tooltips for particular visual elements.

The ToolTipController component manages tooltips in an application. The controller allows you to customize the tooltip behavior and appearance. For example, you can customize the foreground color, position, time interval passed before a tooltip is shown or hidden. The controller also allows you to assign tooltips to standard or third-party controls.

Note

Run the Tooltip Controller demo to try out tooltips.

Expanded Default Tooltip Controller

The default controller manages tooltips for all controls in the application. The DefaultToolTipController component is a toolbox component that allows you to access the default controller in the designer — drop the DefaultToolTipController component onto the component tray. Use the Properties window to customize tooltips.

You can use the static (Shared in VB) ToolTipController.DefaultController property to access the default controller in code.

Note

You do not necessarily need to place the default controller to the form in order to enable tooltips. You can do it to access the controller — customize settings, add event handlers, etc.

Expanded Custom Tooltip Controller

DevExpress controls that support tooltips expose the ToolTipController property. The property specifies the controller that manages tooltips for that particular control. If you assign a custom controller to this property, it is used instead of the default controller. You can assign a single controller to multiple controls — the controller manages tooltips for all these controls. Drop the ToolTipController component from the toolbox onto the component tray and assign it to a control.

Note

You do not necessarily need to assign a custom controller to a control. You can do it to customize settings for that particular control. If the control is not bound to a custom controller, the default controller manages tooltips.

Expanded Tooltip Types

The tooltip controller supports different tooltip types: regular, flyout, and super tooltips. The ToolTipController.ToolTipType property allows you to specify the type of shown tooltips:

  • ToolTipType.SuperTip — a tooltip that consists of a title, content, separator, and footer. You can also display a custom icon in the content area.

    This type supports skins — tooltips have the same look and feel as the owner control.

    See Super Tooltips below for more information.

  • ToolTipType.Standard — a regular tooltip that consists of a title and content. You can also display one of the predefined icons, or a custom icon.

    Regular tooltips do not support skins. To display tooltips according to the current skin, you can change the tooltip type from Standard to SuperTip. The controller automatically converts the tooltips.

    See Regular Tooltips below for more information.

  • ToolTipType.Flyout — a tooltip that can display any control in a flyout window.

    See Floyout Tooltips below for more information.

Expanded Super Tooltips

DevExpress controls expose the SuperTip property that allows you to assign a super tooltip to a control. The SuperToolTip Editor allows you to create super tooltips in the designer. To invoke the editor, click a control's SuperTip ellipsis button in the Properties window.

The editor allows you to specify the tooltip title, contents, and footer. You can also add images, display a separator before the footer, and enable HTML tags. In the Properties window, you can specify paddings, indents, etc.

Create a Super Tooltip in Code

The SuperToolTip class represents a super tooltip. A super tooltip consists of multiple regions (items): title, content, separator, and footer. Items are arranged one under another, each item can display an image and text. A tooltip can contain any combination of items.

The following types specify tooltip items:

  • ToolTipItem — the main region in a super tooltip that displays text and/or image.
  • ToolTipTitleItem — a region displayed at the top (title) or bottom (footer) of a tooltip. This type differs from the regular type by default appearance and indentation settings.
  • ToolTipSeparatorItem — a horizontal line in a tooltip.

Text

Use the ToolTipItem object's following properties to specify the text:

Image

The ToolTipItem.ImageOptions provides access to the following properties that allow you to specify the image displayed in the item:

You can also use the ToolTipItem.Icon property to specify the item's icon. The ToolTipItem.Icon property has priority over ToolTipItem.ImageOptions.

Layout

Use the ToolTipItem.LeftIndent property to specify the indentation of the content from the tooltip's left edge.

You can also use the SuperToolTip.FixedTooltipWidth, SuperToolTip.MaxWidth, SuperToolTip.Padding, and SuperToolTip.DistanceBetweenItems properties to customize the layout.

Appearance

The item's Appearance property provides access to appearance settings that specify the font, border and foreground colors. The default settings depend on the current skin. This property allows you to change the skin's appearance settings.

Example: How to Create a Super Tooltip in Code

Create a SuperToolTip object and populate the SuperToolTip.Items collection with ToolTipItem, ToolTipTitleItem, and ToolTipSeparatorItem objects.

The code below displays the following tooltip.

You can also use the SuperToolTip.Setup method to create a super tooltip in code.

Expanded Regular Tooltips

DevExpress controls expose the following properties that allow you to specify a regular tooltip:

  • ToolTip — a regular tooltip's content. If the content is not specified, the tooltip is not displayed even if the title is specified. You can use line breaks in regular tooltips.
  • ToolTipTitle — a regular tooltip's title. If the title is not specified, it is not displayed.
  • ToolTipIconType — a regular tooltip's predefined icon. To display a custom image in a regular tooltip, use the controller's ToolTipController.ImageList and ToolTipController.ImageIndex properties.

Use the controller's ToolTipController.AppearanceTitle and ToolTipController.Appearance properties to specify the appearance settings applied to the text in the title and content regions. The default font style for the title is bold.

Change Tooltip Type from Regular to Super

Super tooltips are painted according to the current skin, while regular tooltips look the same in all paint schemes.

To replace regular tooltips with super tooltips, set the ToolTipController.ToolTipType property to ToolTipType.SuperTip. The controller automatically converts regular tooltips to super tooltips.

Expanded Flyout Tooltips

To display a flyout tooltip, do the following:

Note

Refer to How to use a custom UserControl as a tooltip for an alternative example.

Important

If a flyout tooltip displays a focusable control, use the XtraForm or RibbonForm as a parent. Otherwise, the tooltip will be immediately hidden when the control is focused.

Expanded Assign a Tooltip to a Third-Party Control

The tooltip controller is an System.ComponentModel.IExtenderProvider object and provides the following extending properties for third-party controls:

  • SuperTip — a super tooltip.
  • Title — a regular tooltip's title.
  • ToolTip — a regular tooltip's content.
  • ToolTipIconType — a regular tooltip's icon.
  • AllowHtmlText — specifies whether to parse HTML tags in the tooltip's text. HTML tags allow you to format the text: size, style, hyperlinks, etc. See How to: Display a Hyperlink in a Tooltip for an example.

Specify Tooltips in the Visual Studio Designer

To access the extending properties in the Visual Studio designer, drop the DefaultToolTipController or ToolTipController component onto the component tray. Select a control on the form — the properties are accessible in the Properties window.

You can also use the controller's properties and events to customize the content, appearance, and behavior.

Specify Tooltips in Code

To assign tooltips to third-party controls in code, use the DefaultToolTipController or ToolTipController component's following methods:

The code below shows how to assign a regular tooltip to the standard text box and specify tooltip properties.

Expanded Examples

Is this topic helpful?​​​​​​​