Tooltip

Displays a message when users hover over a view on a page.

The Tooltip view is most commonly used to display helpful tips about input views. The Tooltip view is a container for other views such as Plain text.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view. Under Events, set the formula configuration properties.

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.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views 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 view has a label, it is displayed. If the Tooltip view does not have a label, and it contains another view, the label of the inner view is displayed. If Show label is not selected, neither label is shown.
Note: The view Label visibility property is ignored.
 Boolean
Label placement The Screen Sizes icon The label position. String
Label 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 view. 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 view. 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 view. 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 Plain text view inside a tooltip, and the following configuration properties are set for the Tooltip view:

  • Events:
    • 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 view 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 view is a container view. At run time, it wraps itself around the nested view.

Events

Set or modify the formula configuration properties and the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. 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 or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.