ComponentOne SuperTooltip for WinForms
Work with SuperTooltip / Using Cascading Style
In This Topic
    Using Cascading Style
    In This Topic

    The following topic explains how to apply a cascading style sheet to your ToolTips for complete control over how and where they appear within your application. SuperTooltip for WinForms supports most HTML features, including cascading style sheets, which offer you greater control over how and where ToolTips appear in your applications. Simply create a cascading style sheet within your code, create your ToolTip, and apply the style sheet styles to the ToolTip.

    In the following example, we will create a stylized ToolTip identical to the one created using the C1SuperTooltip Editor in the Creating C1SuperTooltips at Design Time topic, only this ToolTip will be created in code and use a cascading style sheet. The code in the following steps was placed within the Form_Load event.

    1. Create the cascading style sheet.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      Dim myCSS As String

      'create the cascading style sheet
      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>"

      To write code in C#

      C#
      Copy Code
      string myCSS;

      //create the cascading style sheet
      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>";
    2. Create the header and body text of the ToolTip, and apply styles from the cascading style sheet.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      Dim TipBuilder, TipBody, TipHeader As String

      ' 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='HelpButton.png'>" + _
      "</td>" + _
      "<td>" + _
      "<div class='header'>" + _
      "Press F1 for help." + _
      "</div>" + _
      "</tr>" + _
      "</table>"

      To write code in C#

      C#
      Copy Code
      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='HelpButton.png'>" +
      "</td>" +
      "<td>" +
      "<div class='header'>" +
      "Press F1 for help." +
      "</div>" +
      "</tr>" +
      "</table>";
      Note: In this example 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, HelpButton.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.
    3. Combine the separate parts of the ToolTip, and apply the cascading style sheet.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      ' Combine the ToolTip header and body, and apply the cascading style sheet.
      TipBuilder = myCSS + TipHeader + TipBody

      To write code in C#

      C#
      Copy Code
      // Combine the ToolTip header and body, and apply the cascading style sheet.
      TipBuilder = myCSS + TipHeader + TipBody;
    4. Add the Vista formatting and associate the ToolTip with the button control.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      ' apply the Vista background gradient and associate the ToolTip with Button1
      C1SuperTooltip1.BackgroundGradient = C1.Win.C1SuperTooltip.BackgroundGradient.Vista
      C1SuperTooltip1.SetToolTip(Button1, TipBuilder)

      To write code in C#

      C#
      Copy Code
      // apply the Vista background gradient and associate the ToolTip with Button1
      c1SuperTooltip1.BackgroundGradient = C1.Win.C1SuperTooltip.BackgroundGradient.Vista;
      c1SuperTooltip1.SetToolTip(button1, TipBuilder);
    5. Run the project and mouse over the button associated with C1SuperTooltip1. The Vista-style ToolTip appears.
      Supertooltip