A newer version of this page is available. Switch to the current version.


  • 10 minutes to read

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.


Run the Tooltip Controller demo to try out tooltips.

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.


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.

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.


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.

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:

  • 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.

  • 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.

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

    See Flyout Tooltips below for more information.

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.



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


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

  • Image — a raster image.
  • ImageIndex — an index of the image in the Images collection.
  • ImageUri — a value that specifies the image's universal resource identifier.
  • SvgImage — a vector image.
  • ImageToTextDistance — the indentation of the text from the image.
  • Alignment — whether the image is aligned at the left or right.

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


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, MaxWidth, Padding, and DistanceBetweenItems properties to customize the layout.


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 Items collection with ToolTipItem, ToolTipTitleItem, and ToolTipSeparatorItem objects.

The code below displays the following tooltip.

using DevExpress.Utils;

// The component used to load images from a form's resources.
System.ComponentModel.ComponentResourceManager resources = 
  new System.ComponentModel.ComponentResourceManager(typeof(Form1));
// The image to display within a SuperTooltip.
Image resImage = ((System.Drawing.Image)(resources.GetObject("resource.Image1")));

SuperToolTip sTooltip1 = new SuperToolTip();
// Create a tooltip item that represents a header.
ToolTipTitleItem titleItem1 = new ToolTipTitleItem();
titleItem1.Text = "Edit Popup Menu";
// Create a tooltip item that represents the SuperTooltip's contents.
ToolTipItem item1 = new ToolTipItem();
item1.Image = resImage;
item1.Text = "Show the Edit popup menu";
// Add the tooltip items to the SuperTooltip.

// Assign the created SuperToolTip to a BarItem.
barItem1.SuperTip = sTooltip1;

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

using DevExpress.Utils;

SuperToolTip sTooltip2 = new SuperToolTip();
// Create an object to initialize the SuperToolTip.
SuperToolTipSetupArgs args = new SuperToolTipSetupArgs();
args.Title.Text = "Edit Popup Menu";
args.Contents.Text = "Show the Edit popup menu";
args.Contents.Image = resImage;

// Assign the created SuperToolTip to a BarItem.
barItem2.SuperTip = sTooltip2;

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 ImageList and ImageIndex properties.

Use the controller's AppearanceTitle and 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 SuperTip. The controller automatically converts regular tooltips to super tooltips.

Flyout Tooltips

To display a flyout tooltip, do the following:

using DevExpress.Utils;

ToolTipController.DefaultController.CloseOnClick = DefaultBoolean.False;
ToolTipController.DefaultController.KeepWhileHovered = true;

private void OnGetActiveObjectInfo(object sender, ToolTipControllerGetActiveObjectInfoEventArgs e) {
   if(e.Info == null) {
       e.Info = new ToolTipControlInfo() { Object = e.SelectedControl, ToolTipType = ToolTipType.Flyout };
       if(radioGroupExamples.SelectedIndex == 0)
           e.Info.FlyoutControl = ClockLabelControl;
           e.Info.FlyoutControl = TimerControl;

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


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.

Assign a Tooltip to a Third-Party Control

The tooltip controller is an 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.

using DevExpress.Utils;

// Access the default tooltip controller.
ToolTipController defController = ToolTipController.DefaultController;
// Customize the controller's settings.
defController.Appearance.BorderColor = Color.Red;
defController.ShowBeak = true;
// Set a tooltip for the TextBox control.
defController.SetToolTip(textBox1, "Enter the full name");