Add a tooltip to a field on a record page

Medium
PDF

Example. Add a tooltip to the Type field of the contact page.

Create a replacing view model schema of the contact page 

  1. Go to the Configuration section and select a custom package to add the schema.
  2. Click AddReplacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "ContactPageV2."
    • Set Title to "Display schema - Contact card."
    • Select "ContactPageV2" in the Parent object property.
  4. Add a localizable string that contains the tooltip text.

    1. Click the scr_add_button.png button in the context menu of the Localizable strings node.
    2. Fill out the localizable string properties.

      • Set Code to "TypeFieldHint."
      • Set Value to "Choose the type of the contact from the list. <a href="https://academy.creatio.com/docs/user/platform_basics/user_interface/record_pages_shortcut/record_pages" target="_blank">Read more</a>."
    3. Click Add to add a localizable string.
  5. Set up the tooltip of the Type field of the contact page. To do this, add the configuration object of the page field to the diff array of modifications.

    View the source code of the replacement view model of the contact page below.

    ContactPageV2
    define("ContactPageV2", [], function () {
        return {
            /* The name of the record page object's schema. */
            entitySchemaName: "Contact",
            /* Display the tooltip. */
            diff: /**SCHEMA_DIFF*/[
                /* The metadata to add the tooltip to the button. */
                {
                    /* Execute the operation that modifies the existing element. */
                    "operation": "merge",
                    /* The meta name of the field to change. */
                    "name": "Type",
                    /* The meta name of the parent container whose field to change. */
                    "parentName": "ContactGeneralInfoBlock",
                    /* Change the field in the element collection of the parent element. */
                    "propertyName": "items",
                    /* The properties to pass to the element's constructor. */
                    "values": {
                        /* The property of the field that displays the tooltip. */
                        "tip": {
                            /* The tooltip text. */
                            "content": { "bindTo": "Resources.Strings.TypeFieldHint" },
                            /* The display mode of the tooltip.
                            By default, WIDE. Changes the width of the green line displayed in the tooltip. */
                            "displayMode": Terrasoft.controls.TipEnums.displayMode.WIDE
                        }
                    }
                }
            ]/**SCHEMA_DIFF*/
        };
    });
    
  6. Click Save on the Designer's toolbar.

Outcome of the example 

To view the outcome of the example, refresh the Contacts section page.

As a result, Creatio will add the tooltip to the Type field of the contact page.