Creating Rich ToolTips for C1InputPanel Items

You can easily create rich ToolTips for input components using the ToolTip Editor. In this topic, we will add a ToolTip to an InputButton component.

To add a rich ToolTip to an input item, follow these steps:

Click C1InputPanel's smart tag () to open the C1Input Tasks menu. Select Edit Items.
The C1InputPanel Item Collection Editor opens.
Select an InputButton component from the drop-down list and click Add to include it in the panel.
Locate the ToolTipText property and click its ellipsis button .
The ToolTipText editor opens with the Office tab page in focus.
Complete the following tasks in the Office tab page:
a. Set the Title to "ToolTip Tutorial".

b. 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.

c. Check the Top Separator box.

d. Type the following text into the Body Text text box: "Click for information on ToolTips."

e. Check the Bottom Separator box.

f. Type "helpcentral.componentone.com" into the Subtitle text box.

g. 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:
1. In the editor, delete the <b> and </b> tags that enclose "helpcentral.componentone.com".
2. Select "Click here for information on ToolTips." and click the Italics button.
3. 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 complete the following steps:
1. Click the ellipsis () button next to the BackGroundImage property to access the Select Resource dialog box.
2. Click the Local resource radio button, click Import to access the Open dialog box, and select a background image. Click Open to import the image.
3. Set the following properties:
  - Set the BackgroundImageLayout property to Tile.
  - Set the Border property to True.
  - Set the BorderColor property to Red.
  - Set the IsBalloon property to True.
  - Set the IntialDelay property to "50".
Click OK to close the ToolTip Editor, then click OK to close the C1InputPanel Collection Editor.
Press F5 to build the project and then hover over the input button with your cursor. The result will resemble the following image: