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.
SuperTooltips can be created at design-time as well via code.
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:
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.
A preview of the ToolTip appears in the Preview window.
When you run the application and mouse over the control associated with a C1SuperTooltip, the ToolTip appears.
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)
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>"); |
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>" + _ |
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>" + |
For more information, see the SetToolTip method.
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 |
C# |
Copy Code
|
---|---|
// Initialize Supertooltip objects
C1SuperTooltip superTooltip;
C1SuperTooltip cssTooltip;
C1SuperTooltip htmlTooltip;
C1SuperTooltip appearanceTooltip;
|
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>"); |
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); |
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>"); |
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>"); |