ComponentOne SuperTooltip for WinForms
In This Topic
    Work with SuperTooltip
    In This Topic

    The following topics cover how to work with SuperTooltips:

    The following topics explain how to create C1SuperTooltips at design time using the C1SuperTooltip Editor, in code, by using cascading style sheets, and using HTML, as well as how to add multiple ToolTips, adjust C1SuperTooltip appearance and behavior settings, and add images to ToolTips.

    Create SuperTooltips

    SuperTooltips can be created at design-time as well via code.

    Creating C1SuperTooltips at Design Time

    C1SuperTooltip provides a design-time editor, C1SuperTooltip Editor, to simplify the process of creating ToolTips in your applications. The following topic will show you how to create ToolTips and change their appearance and behavior using this editor. A ToolTip is used to display helpful information when a mouse hovers over an item in an application. Usually ToolTips contain only plain text. Using C1SuperTooltip, you can display HTML content, including images, tables, and numbered, bulleted, or nested lists.

    You can associate C1SuperTooltip with any System.Windows.Forms control or System.Windows.Forms.ToolStripItem.

    To add a C1SuperTooltip to your application:

    1. Double-click the C1SuperTooltip component in the Toolbox to add it to your form.
    2. Select the control you would like associated with the C1SuperTooltip.
    3. In the Properties window, click the ellipsis button next to the ToolTip on C1SuperTooltip1 property. The C1SuperTooltip Editor appears.
      Image showing the working of Supertooltip editor.

      At design time, there are two ways you can create the content of your ToolTip: either using the Office tab or using Html tab to manually enter your own HTML code. In this example, we will use the Office tab, but click the Html tab and enter your code there, if desired. When you use the Office tab, C1SuperTooltip automatically creates the HTML code behind the ToolTip for you.

    4. To set up your ToolTip:
      1. Enter a title for the ToolTip in the Title field. The title will appear to the right of the image, if any.
      2. Click the drop-down arrow next to the Image property to find and select an image to appear next to the ToolTip title.
      3. Check the Top Separator checkbox if you want a divider line to appear after the title text, separating the title from the body text of the ToolTip.
      4. Enter the text for the C1SuperTooltip in the Body Text field.
      5. Check the Bottom Separator check box if you want a divider line to appear after the body text of the ToolTip, separating it from the subtitle.
      6. Enter a subtitle for the ToolTip in the Subtitle filed. The subtitle will appear to the right of the subimage, if any.
      7. Click the drop-down arrow next to the Subimage property to find and select an image to appear next to the subtitle.

      A preview of the ToolTip appears in the Preview window.

    5. Select the Properties tab and set the desired properties for C1SuperTooltip1. You can do things such as: change ToolTip text and background color, add a background image, or modify how long and how quickly a ToolTip window is displayed. For a complete list of properties, see C1SuperTooltip Properties.

      When you run the application and mouse over the control associated with a C1SuperTooltip, the ToolTip appears.


      Image showing tooltip

    Creating a C1SuperTooltip Programmatically

    The following topic explains how to create C1SuperTooltips in code. You can specify the C1SuperTooltip text and associate it with a control using the SetToolTip method.

    In the SetToolTip method, specify the control or Windows.Forms.ToolStripItem to associate with the ToolTip first, and then add the string, or the HTML code used to create the ToolTip text.

    The code for the SetToolTip method looks like this:

    C1SuperTooltip1.SetToolTip(Control, String)
    
    

    or

    C1SuperTooltip1.SetToolTip(ToolStripItem, String)
    
    Note: In the following examples an embedded resource containing an image is used. To embed a resource, select Project | YourProjectName Properties. Select Add Resource and choose to add an existing file, NewDoc.png in this example, or add a new one. Then, in the Solution Explorer, select the resource file and set Build Action to Embedded Resource in the Properties window.

    To create a C1SuperTooltip for a control programmatically:

    1. Add a C1SuperTooltip control and the control to associate it with to your form. In this example, we will use a Button1 control.
    2. Add the following code to the Form_Load event. This code uses an embedded resource that contains an image, NewDoc.png, but any image can be used.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      C1SuperTooltip1.SetToolTip(Button1, "<table><tr>" + _
      "<td><img src='NewDoc.png'></td>" + _
      "<th>New Document</th>" + "</tr></table>")

      To write code in C#

      C#
      Copy Code
      c1SuperTooltip1.SetToolTip(button1, "<table><tr>" +
      "<td><img src='NewDoc.png'></td>" +
      "<th>New Document</th>" + "</tr></table>");
    3. Run your project. The code creates a C1SuperTooltip like the following.

    Image showing the tooltip.

    To create a C1SuperTooltip for a ToolStripItem programmatically:

    1. Add a C1SuperTooltip control and a System.Windows.ToolStrip control to your form. In this example, we have added buttons to the ToolStrip.
    2. Add the following code to the Form_Load event. This code uses an embedded resource that contains an image, NewDoc.png, but any image can be used.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      ' hide the default ToolTip so only the C1SuperTooltip is visible
      ToolStripButton1.AutoToolTip = False
      C1SuperTooltip1.SetToolTip(ToolStripButton1, "<table><tr>" + _
      "<td><img src='NewDoc.png'></td>" + _
      "<th>New Document</th>" + "</tr></table>")

      To write code in C#

      C#
      Copy Code
      // hide the default ToolTip so only the C1SuperTooltip is visible
      toolStripButton1.AutoToolTip = false;
      c1SuperTooltip1.SetToolTip(toolStripButton1, "<table><tr>" +
      "<td><img src='NewDoc.png'></td>" +
      "<th>New Document</th>" + "</tr></table>");
    3. Run your project. The code creates a C1SuperTooltip like the following:
      Supertooltip created after running the code.

    For more information, see the SetToolTip method.

    To create a simple WinForms application in .NET to work with SuperTooltip control, complete the following steps:
    1. Add four buttons from the Toolbox on the form:

      Button.Name property Button.Text property
      btn_hoverProgram Hover over me to see Programmatical Super tooltip
      btn_hoverCSS Hover over me to see super tooltip using CSS
      btn_hoverHTML Hover over me to see super tooltip using HTML
      btn_Appearance Hover over me to see changed super tooltip appearance
    2. Declare C1SuperTooltip objects for creating a simple SuperTooltip, SuperTooltip using css, SuperTooltip using html and SuperTooltip using appearance settings.
      C#
      Copy Code
      // Initialize Supertooltip objects
      C1SuperTooltip superTooltip;
      C1SuperTooltip cssTooltip;
      C1SuperTooltip htmlTooltip;
      C1SuperTooltip appearanceTooltip;
      
    3. Add code to create a simple tooltip using the SetToolTip method of C1SuperTooltip class in the Form1_Load event.
      C#
      Copy Code
      //  Adding super tooltip programmatically
      superTooltip = new C1SuperTooltip();
      superTooltip.SetToolTip(btn_hoverProgram, "<table><tr>" +
          "<td><img src='res://icons8-help-48.png'></td>" +
          "<th>New Document</th>" + "</tr></table>");
      
    4. Add code to create SuperTooltips using cascading style sheets.
      C#
      Copy Code
      // Super tooltip using css
      cssTooltip = new C1SuperTooltip();
      cssTooltip.BackgroundGradient = BackgroundGradient.Vista;
      string myCSS = "<style type='text/css'>" +
          ".header{font-family: tahoma; font-weight: bold; margin-left: 2px; vertical-align:middle}" +
          ".body{font-family: tahoma; margin-left: 8px}" +
          "img{vertical-align: middle}" +
          "td{vertical-align:middle}" +
          "p{border-bottom: medium solid #999999; border-bottom-width:1px}" +
          "</style>";
      string TipBuilder, TipBody, TipHeader;
      // create the header, or title, of the ToolTip
      TipHeader = "<div class='header'>" + "Copy" + "</div>";
      //create the body text of the ToolTip
      TipBody = "<table width=160px>" +
          "<tr>" +
           "<td>" +
            "<div class='body'>" +
            "Copy the selection and put it<br>on the Clipboard. " +
            "</div></td></tr></table><p></p>" +
            "<table cellpadding=0><tr><td><img src='res://icons8-help-48.png' height = '12' width = '12'></td>" +
            "<td><div class='header'>Press F1 for help.</div></tr></table>";
      TipBuilder = myCSS + TipHeader + TipBody;
      cssTooltip.SetToolTip(btn_hoverCSS, TipBuilder);
      
    5. Add code to create SuperTooltips using HTML.
      C#
      Copy Code
      // Super tooltip using HTML
      htmlTooltip = new C1SuperTooltip();
      htmlTooltip.SetToolTip(btn_hoverHTML, "<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>");
      
    6. Add code to configure the appearance settings in SuperTooltip.
      C#
      Copy Code
      // Super tooltip appearance settings
      appearanceTooltip = new C1SuperTooltip();
      appearanceTooltip.BackgroundGradient = BackgroundGradient.Gold;
      appearanceTooltip.ForeColor = Color.Green;
      appearanceTooltip.Shadow = false;
      appearanceTooltip.Border = false;
      appearanceTooltip.Font = new Font("Segoe UI", 15);
      appearanceTooltip.AutoPopDelay = 1000;
      appearanceTooltip.SetToolTip(btn_Appearance, "<span >Click here to view a <b>C1SuperLabel</b> showing<br> some of the cool features of <b>C1SuperTooltip</b>.</span>");
      
    7. Run the code and observe the SuperTooltips.Image showing the ouptut after running the code.
    See Also