# QuickStart This topic provides detailed steps for creating a simple app using SuperTooltip. ## Content This quick start guide explains how to add two Microsoft stylized **C1SuperTooltips** and a C1SuperLabel control to your form. ### .NET Framework **Step 1 of 4: Adding a C1SuperLabel to a Project** Start by adding a C1SuperLabel control to your project and adding some HTML code for it. To add a C1SuperLabel to a project, complete the following steps: 1. Create a new .NET project and add two button controls to the form. ![Image with button controls](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_8.png) 2. Right-click the **Button1** control and select **Properties** to view the Properties window. 3. Enter "View C1SuperLabel" next to the **Text** property and resize the button so the text is visible. 4. Select **Button2** and enter "Hide C1SuperLabel" next to its **Text** property. Resize the button so the text is visible. 5. Add the SuperTooltip for WinForms components to the Toolbox. 6. Double-click the C1SuperLabel control in the Toolbox to add it to your form so it looks like the following: ![Image showing form with superlabel](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_9.png) 7. Click the **ellipsis** button next to C1SuperLabel's **Text** property in the Properties window. The **C1SuperLabel Editor** appears. 8. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Click here for the HTML code to add in the text box. DOC-SUMMARY-TAG-CLOSE
These are just some of the things you can show using **C1SuperTooltip**: ```html

Lists:

Nested lists
Numbered and bulleted lists

Tables:

Here's a table with some sales numbers:

This cell spans three rows.	Semester 1
	Quarter 1			Quarter 2
	Jan	Feb	Mar	Apr	May	Jun
Widgets	12	23	23	43	23	34
Sprockets	45	32	23	23	34	43

Images: The background of this C1SuperLabel is an image.
Borders:
Here's a thick border.

Preformatted Text:

        string tipText = "Hello <b>World</b>";
        C1SuperTooltip.SetToolTip(control, tipText);

Nesting:
This is a red div.
This is a nested green div.
This is a nested blue div.

``` DOC-DETAILS-TAG-CLOSE 9. In the Properties window, click the drop-down arrow next to the **BackColor** property, select the **Web** tab, and select **White**. 10. Add an image to the C1SuperLabel control: * Click the **ellipsis** button next to the **BackgroundImage** property. The **Select Resource** dialog box appears. * Select **Local resource** and click the **Import** button. The **Open** dialog box appears. * Locate and select the **TipBackground.png** or another graphic of your choice and then click **Open**. The TipBackground.png image is installed, by default, with the SuperTooltip for WinForms samples and is located in **Documents\\ComponentOne Samples\\WinForms**. * Click **OK**. 11. Click the drop-down arrow next to the **BackgroundImageLayout** property and select **Stretch**. 12. Set the **Visible** property to **False**. **Step 2 of 4: Creating a stylized C1SuperTooltip for a Control** Next, create a Microsoft stylized C1SuperTooltip using the **Office** tab in the **C1SuperTooltip Editor**. To do this, complete the following steps: 1. Double-click the C1SuperTooltip control in the Toolbox to add it to your form. 2. First, we will add an image to the ToolTip's image collection. We are using a small Help graphic to be used as the Subimage in our ToolTip. 1. Select **C1SuperTooltip1** and click the **ellipsis** button next to the **Images** property in the Properties window. The **Edit Image Collection** editor appears. 2. Click the **Add** button, and find and select the desired image file. 3. Once the image is added to the collection, click **OK**. We will specify this image in the ToolTip a little later. 3. Right-click the **Button1** control and select **Properties** to view the Properties window. 4. Click the **ellipsis** button next to the **ToolTip on C1SuperTooltip1** property and the **C1SuperTooltip Editor** appears. 5. On the **Office** tab, enter **View C1SuperLabel** in the **Title** text box. 6. Enter the following text in the **Body Text** text box: `Click here to view a C1SuperLabel showing some of the cool features of C1SuperTooltip.` Notice a preview of the C1SuperTooltip appears in the **Preview** window. ![Image with Supertooltip on form.](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_11.png) 7. To make the ToolTip appear on multiple lines, place the cursor after the word *showing* in the **Body Text** and press **ENTER**. 8. You can also format the body text from within the **Office** tab. Select and right-click **C1SuperLabel**, and then choose **Bold** from the context menu or click Ctrl+B on the keyboard. Do the same for **C1SuperTooltip**. 9. Check the **Bottom Separator** check box. 10. Enter the following text in the **Subtitle** text box: `Press F1 for more help.` 11. Click the **Subimage** drop-down arrow and select the image you added to the collection in the previous step 2. ![Image showing cursor in the dropdown.](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_12.png) Note that C1SuperTooltip automatically creates the HTML used to format your ToolTip so you don't have to. To view the HTML code, click the **Html** tab. We will create a ToolTip using only HTML code in the **Creating a C1SuperTooltip with HTML Code** topic of this quick start. 12. Click the **Properties** tab in the editor. 13. Click the drop-down arrow next to the **BackgroundGradient** property and choose **Vista**. 14. Click **OK** to close the **C1SuperTooltip Editor**. **Step 3 of 4: Creating a C1SuperTooltip with HTML Code** Then create a **C1SuperTooltip** in the **C1SuperTooltip Editor** using only HTML code. Complete the following steps: 1. Select the **Button2** control. 2. Click the **ellipsis** button next to the **ToolTip on C1SuperTooltip1** property to open the **C1SuperTooltip Editor**. 3. Click the **Html** tab and enter the following HTML markup: ```html

Hide C1SuperLabel

Click here to hide the C1SuperLabel
once you are done viewing it.

	Press F1 for help.

``` 4. Click **OK** to close the **C1SuperTooltip Editor**. Note that the ToolTip will appear similar to the following: ![Image showing how a tooltip looks](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_13.png) **Step 4 of 4: Adding Code for the Buttons and Running the Project** Once you have created the C1SuperLabel and **C1SuperTooltips**, you can add code for the buttons on the form and run the project. To do this, complete the following steps: 1. Double-click **Button1** and add the following code to the **Button1\_Click** event: DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in Visual Basic DOC-SUMMARY-TAG-CLOSE ```vbnet C1SuperLabel1.Visible = True ``` DOC-DETAILS-TAG-CLOSE DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in C# DOC-SUMMARY-TAG-CLOSE ```csharp c1SuperLabel1.Visible = true; ``` DOC-DETAILS-TAG-CLOSE 2. Double-click **Button2** and add the following code to the **Button2\_Click** event: DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in Visual Basic DOC-SUMMARY-TAG-CLOSE ```vbnet C1SuperLabel1.Visible = False ``` DOC-DETAILS-TAG-CLOSE DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in C# DOC-SUMMARY-TAG-CLOSE ```csharp c1SuperLabel1.Visible = False; ``` DOC-DETAILS-TAG-CLOSE 3. Run the project and mouse over **Button1**. Notice the ToolTip is having Vista stylized C1SuperTooltip: ![Supertooltip style](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_14.png) 4. Click **View C1SuperLabel**. The C1SuperLabel appears. ![Appearance of superlabel](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_15.png) 5. Mouse over **Button2**. The Vista-style C1SuperTooltip looks like this: ![Image shows how a supertooltip looks.](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image12_16.png) The text in the ToolTip for **Button2** was applied through HTML markup, but you will notice the C1SuperTooltip **Vista** background style appears in both ToolTips. Any properties you set via the **C1SuperTooltip Editor** will be the same in all ToolTips for controls associated with that C1SuperTooltip. 6. Click **Hide C1SuperLabel**, and the C1SuperLabel is hidden. ### .NET To create a simple WinForms application in .NET for SuperTooltip control, complete the following steps: 1. Create a new Windows Forms application. 2. In Solution Explorer, right-click Dependencies and choose Manage NuGet Packages. Add C1.Win and C1.Win.SuperTooltip .NET packages. 3. Add two buttons by amending these changes in their properties. | Button | Button.Name Property | Button.Text Property | | ------ | -------------------- | -------------------- | | 1 | btn\_viewLabel | View SuperLabel | | 2 | btn\_hideLabel | Hide SuperLabel | 4. Switch to code editor and initialize the C1SuperLabel object. ```csharp // Initialize C1SuperLabel object C1SuperLabel superLabel; ``` 5. Add SuperLabel programmatically: ```csharp // Adding super label programmatically superLabel = new C1SuperLabel(); this.Controls.Add(superLabel); ``` 6. Add the string HtmlTextin the resource file SuperLabelResource.resx.These are just some of the things you can show using **C1SuperTooltip**: ```html

Lists:

Nested lists
Numbered and bulleted lists

Tables:

Here's a table with some sales numbers:

This cell spans three rows.	Semester 1
	Quarter 1			Quarter 2
	Jan	Feb	Mar	Apr	May	Jun
Widgets	12	23	23	43	23	34
Sprockets	45	32	23	23	34	43

Images: The background of this C1SuperLabel is an image.
Borders:
Here's a thick border.

Preformatted Text:

    string tipText = "Hello <b>World</b>";
    C1SuperTooltip.SetToolTip(control, tipText);

Nesting:
This is a red div.
This is a nested green div.
This is a nested blue div.

``` 7. Add background image to the SuperLabel. ```csharp // Adding background image superLabel.BackgroundImage = SuperLabelResource.BackgroundImage; superLabel.BackgroundImageLayout = C1.Win.SuperTooltip.BackgroundImageLayout.Stretch; ``` 8. Add Vista-style SuperTooltip using the BackgroundGradient and Images properties of C1SuperTooltipBase class. Choose the background gradient using the BackgroundGradient enumeration: ```csharp // **Stylized super tool tip ** // Adding Image to super tooltip. C1SuperTooltip superTooltip = new C1SuperTooltip(); superTooltip.Images.Add(new ImageEntry("HelpIcon", SuperLabelResource.HelpIcon)); superTooltip.BackgroundGradient = BackgroundGradient.Vista; ``` 9. Call the ShowLabelClick and the HideLabelClick events, and add the codes as below: ```csharp // show super label. private void ShowLabelClick(object sender, EventArgs e) { superLabel.AutoSize = true; superLabel.Visible = true; } // Hide superlabel private void HideLabelClick(object sender, EventArgs e) { superLabel.Visible = false; } ``` 10. Bind the Label\_Click event handlers to the button Click events. So, both the button\_Click handler and the Label\_Click handler are called when the button is clicked. ```csharp btn_viewLabel.Click += ShowLabelClick; btn_hideLabel.Click += HideLabelClick; ``` 11. Add tooltip to button1 and button2 using SetToolTip method of C1SuperTooltip class: ```csharp // Show button tooltip superTooltip.SetToolTip(btn_viewLabel, " " + "" + "" + "" + "" + "" + "

View C1SuperLabel
Click here to view a C1SuperLabel showing some of the cool features of C1SuperTooltip.
" + "Press F1 for more help.

"); // hide button tooltip superTooltip.SetToolTip(btn_hideLabel, " " + "" + "" + "" + "" + "" + "

Hide C1SuperLabel
Click here to hide the C1SuperLabel once you are done viewing it.
" + "Press F1 for more help.

"); ``` ![image](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/image.d61c4d.png) >type=note > Note: The latest WinForms .NET Edition does not include rich design-time support yet. We will enhance it in future releases. ## See Also [Elements](/componentone/docs/win/online-supertooltip/elements) [Design-Time Support](/componentone/docs/win/online-supertooltip/designtimesupport)