Tutorials > Sales Center > Extend a page in an editor

< Previous | Next >

Add tooltip help to the new page

In this part of the tutorial, we will add help information to the extended Order Summary page of the IBM Sales Center client to describe the new fields you created. You will add descriptive information that displays when the mouse hovers over a particular field called a tooltip.

Adding tooltip text

To add tooltip text, we will create a newOrderSummaryResources.properties file, add the translatable display text to the properties file, then update the definition of the control widgets to use that display text:

Procedure

1. To create the newOrderSummaryResources.properties file:

2. 
   

   1. In the Package Explorer view, navigate to the orderEditorExtension plug-in.

   2. Inside the src folder, right-click on the orderEditorExtension package.

   3. Select New > File.

   4. In the File name field, enter newOrderSummaryResources.properties.

   5. Click Finish. The properties file opens for editing.

3. To add the translatable display text to the newOrderSummaryResources.properties file:

   1. Add the following lines to the end of the file: OrderSummaryPage.receiverNameTooltip = Name of person receiving gift OrderSummaryPage.senderNameTooltip = Name of person sending gift OrderSummaryPage.message1Tooltip = Message text line 1 OrderSummaryPage.message2Tooltip = Message text line 2

   2. Save and close the file.

4. To update the control widget definitions:

   1. In the orderEditorExtension plug-in, open the plugin.xml file for editing.

   2. In the Extensions tab, in the All Extensions pane, expand the com.ibm.commerce.widgets.controls plug-in.

   3. Modify the tooltip field of recipientLabel, senderLabel, message1Label, and message2Label by adding a reference to the tooltip text in the newOrderSummaryResources.properties file...

      Label id	tooltip field
      recipientLabel and recipientField	OrderSummaryPage.receiverNameTooltip
      senderLabel and senderField	OrderSummaryPage.senderNameTooltip
      message1Label and message1Field	OrderSummaryPage.message1Tooltip
      message2Label and message2Field	OrderSummaryPage.message2Tooltip

      For example, the screen capture below displays the definition for recipientLabel:

      

To test the tooltip text:

1. Launch the IBM Sales Center client.

2. Go to the Summary page and hover the mouse pointer over the Name of recipient input field. Your tooltip help text displays...

   

3. Close the IBM Sales Center client.

< Previous | Next >

+

Search Tips   |   Advanced Search