In This Topic
You can add rich ToolTips to RibbonItems, RibbonGroups, and RibbonTabs using the ToolTip Editor. In this topic, we will add a rich ToolTip to a RibbonTab.
Complete the following steps:
- Select C1Ribbon's default tab to activate it. A list of the tab's properties will be revealed in the Properties window.
- In the Properties window, locate the tab's ToolTip property and click the ellispis (…) button.
The ToolTip editor opens with the Office tab page in focus.
- Complete the following tasks in the Office tab page:
- Enter "ToolTip Tutorial" into the Title text box.
- Click the Image drop-down and select Add Image to access the Open dialog box. Select a small image (an icon of 16x16 pixels is best) and click Open.
- Check the Top Separator checkbox.
- Type the following text into the Body Text text box: "ComponentOne Ribbon for WinForms."
- Check the Bottom Separator checkbox.
- Type "www.componentone.com" into the Subtitle text box.
The Preview pane will display an image similar to the following:
- Click the Html tab to bring its tab page into focus and then complete the following steps:
- In the editor, delete the <b> and </b> tags that enclose "www.componentone.com".
- Select "ComponentOne Ribbon for WinForms" and press the Italic button.
- Place your cursor in front of the title ("ToolTip Tutorial") and type <font color="red">. Move your cursor to the end of the title and type </font>.
The Preview pane will display an image similar to the following:
- Click the Properties tab to bring its tab page into focus and then set the following properties:
- Set the Border property to True
- Set the BorderColor property to Red.
- Set the IsBalloon property to True.
- Set the IntialDelay property to "50". This means that the ToolTip will appear 50 milliseconds (.05 seconds) after a user hovers over the tab with the cursor.
- Press OK to close the ToolTip Editor, then press OK to close the C1InputPanel Collection Editor.
You can also use html table header cells (<th> tags) in the tooltips.
This topic illustrates the following:
Once the project is built, hover over the RibbonTab with your cursor to make the ToolTip appear. The resulting ToolTip will resemble the image below: