# Using HTML

## Content



If you choose to create a ToolTip by using all of your own HTML code, you can enter it on the **Html** tab of the **C1SuperTooltip Editor**.

To add a **C1SuperTooltip** using HTML, complete the following steps:

1.  In your project, select the control for which you are creating a <span data-popup-content="This class is available in both \u003ca href=\u0022/componentone/docs/win/online-supertooltip/\u0022\u003e.NET Framework\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-supertooltip/\u0022\u003e.NET\u003c/a\u003e Core." data-popup-title="C1SuperTooltip" data-popup-theme="ui-tooltip-green qtip-green">C1SuperTooltip</span>.
2.  In the Properties window, click the **ellipsis** button next to the **ToolTip on C1SuperTooltip1** property for the control to open the **C1SuperTooltip Editor**.
3.  Select the **Html** tab.
4.  Enter the following HTML code in the **Html** text box:
    
    ```
    <span style='font: 12pt Arial; color:blue'>Click here to view a <b>C1SuperLabel</b> showing<br> some of the cool features of <b>C1SuperTooltip</b>.</span> 
    ```
    
    A preview of the C1SuperTooltip appears in the **Preview** window.
    
    <br />![Supertooltip in preview window.](https://cdn.mescius.io/document-site-files/images/893e135b-d143-4aac-854d-341135771190/imagesext/image9_5.png)
5.  Click the **Properties** tab. Notice the ForeColor property is set to **InfoText** and the Font property is set to **Tahoma, 8pt**, by default, but the preview of the ToolTip shows the forecolor as blue and the font as Arial, 12pt. This is because when **\<span>** tags are used to format the text in your HTML code, they cannot be overwritten by the properties specified in the **Properties** tab of the editor.
6.  Click **OK** to close the editor.