At run time, the C1ProgressBar control will display a ToolTip if a user runs his cursor over it. By default, this ToolTip will display the current percentage of progress. In this topic, you will customize the ToolTip so that it displays a modified string along with the maximum value setting of the control. This topic assumes that you have created an ASP.NET AJAX-Enabled Web site containing a ScriptManager control and a C1ProgressBar control.

Formatting the ToolTip in Design View

Complete the following steps:

1. Click the Design button to enter Design view.
2. Right-click the C1ProgressBar control to open its context menu and select Properties from the list. The Properties window opens with the C1ProgressBar control's properties in focus.
3. Set the ToolTip property to 'Maximum Value: {5}'.

   

4. Press F5 to run the project and run your cursor over the C1ProgressBar control. Observe that a ToolTip appears with 'Maximum value: 100' as its string.

Formatting the ToolTip in Source View

Complete the following steps:

1. Click the Source button to enter Source view.
2. Place ToolTip = "Maximum Value: {5}" in the <cc1:C1ProgressBar> tag so that the markup resembles the following:
   <cc1:C1ProgressBar ID="C1ProgressBar1" runat="server" Width="288px" Height="22px" UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox" ToolTip="Maximum value: {5}" />
3. Press F5 to run the project and run your cursor over the C1ProgressBar control. Observe that a ToolTip appears with 'Maximum value: 100' as its string.

Formatting the ToolTip in Code

Complete the following steps:

1. On the Visual Studio toolbar, click View | Code to enter code view.
2. Import the following namespace into your project:

   Visual Basic

   Visual Basic	Copy Code
   Imports C1.Web.Wijmo.Controls.C1ProgressBar

   C#

   C#	Copy Code
   using C1.Web.Wijmo.Controls.C1ProgressBar;

3. Customize the ToolTip by adding the following code to the Page_Load event:

   Visual Basic

   Visual Basic	Copy Code
   C1ProgressBar1.ToolTip = "Maximum value: {5}"

   C#

   C#	Copy Code
   C1ProgressBar1.ToolTip = "Maximum value: {5}";

4. Press F5 to run the project and run your cursor over the C1ProgressBar control. Observe that a ToolTip appears with 'Maximum value: 100' as its string.

This Topic Illustrates the Following:

In this topic, you created a custom ToolTip for the C1ProgressBar control. The following image illustrates a progress bar with its ToolTip property set to "Maximum Value: {5}".