Tooltip

Tooltip displays an information message on other controls.

The Tooltip control is most commonly used to display helpful tips about input controls. The Tooltip control is a container for other controls such as Text.

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab. Set the formula configuration properties in the Events tab.
Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.
Theme definitions
Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.
The appearance configuration properties for Tooltip are shown in the following table:
Table 1. Appearance configuration properties for Tooltip
Appearance configuration property Description Data type
Show label The Screen Sizes icon Displays a label. If the Tooltip control has a label, it is displayed. If the Tooltip control does not have a label, and it contains another control, the label of the inner control is displayed. If Show label is not selected, neither label is shown.
Note: The coach view Label visibility property is ignored.
 Boolean
Label placement The Screen Sizes icon The label position. String
IBM BPM version 8.6.0 cumulative fix 2017.12Label width Large screen icon The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. String
Width The Screen Sizes icon The width of the control. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. Integer
Color style The color style for the control. The colors correspond to variables in the specified theme. ColorStyle
Horizontal position The horizontal positioning of the tooltip. .  
Vertical position The vertical positioning of the tooltip.  

The behavior configuration properties for Tooltip are shown in the following table:

Table 2. Behavior configuration properties for Tooltip
Behavior configuration property Description Data type
Show tooltip The Screen Sizes icon Displays the tooltip when the page loads. Boolean
Show on hover Displays the tooltip when the user hovers over the related control. Boolean
Text as HTML Renders the tooltip text using HTML. If so, you must enter the tooltip text in the Help text box, in the General tab. Boolean

Example

In this example, there is a Text control inside a Tooltip, and the following configuration properties are set for the Tooltip control:

  • Events tab:
    • The Tooltip formula is set to "My tooltip".
  • Appearance configuration:
    • Show label is not selected.
    • Label placement is set to Left.
    • Width is set to 50%.
    • Color style is set to Default.
    • Horizontal position is set to Left.
    • Vertical position is set to Top.
  • Behavior configuration:
    • Show tooltip is selected.
    • Show on hover is not selected.
    • Text as HTML is selected.

These properties and their values result in a tooltip element which is half the size of the default Tooltip control size, and that says My tooltip on a black background. This tooltip element is displayed above a text area, on the left hand side, and is visible as soon as the page loads.

Note: The Tooltip control is a container control. At runtime, it wraps itself around the nested control.

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.
The formula configuration properties for Tooltip are shown in the following table:
Table 3. Formula configuration properties for Tooltip
Formula configuration property Description Data type
Tooltip formula Formula or expression used to calculate the Tooltip text.

For more information about formulas, see Formulas.

 String
Tooltip has the following types of event handlers:
  • On load: Activated when the page loads.
  • On click: Activated when the tooltip is clicked.

Methods

For detailed information on the available methods for Tooltip, see the Tooltip JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.

Parent topic: Coach views in the BPM UI toolkit