Add a button tooltip

Level: advanced

Example

Add a tooltip to the Save button 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 Add → Replacing view model on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "ContactPageV2."
   • Set Title to "Display schema – Contact card."
   • Set Parent object to "ContactPageV2."

   

4. Add a localizable string that contains the tooltip text.

   1. Click in the context menu of the Localizable strings node.

   2. Fill out the localizable string properties.

      • Set Code to "SaveButtonHint."
      • Set Value to "Press to save changes."

      

   3. Click Add to add a localizable string.

5. Set up the tooltip for the Save button of the contact page. To do this, add the configuration object of the button on the page to the diff array of modifications.

   View the source code of the replacement view model of the contact page below. There are different ways to add a tooltip to a button configuration object.

   ContactPageV2 (option 1)

   define("ContactPageV2", [], function () {
       return {
           /* The name of the record page entity schema. */
           entitySchemaName: "Contact",
           /* The tooltip view. */
           diff: /**SCHEMA_DIFF*/[
               /* Properties to add the tooltip to the button. */
               {
                   /* Run the operation that modifies the existing element. */
                   "operation": "merge",
                   /* The meta name of the parent container to add the button. */
                   "parentName": "LeftContainer",
                   /* Add the button to the element collection of the parent element. */
                   "propertyName": "items",
                   /* The meta name of the changed button. */
                   "name": "SaveButton",
                   /* The properties to pass to the element’s constructor. */
                   "values": {
                       /* The button tooltip. */
                       "hint": { "bindTo": "Resources.Strings.SaveButtonHint" } 
                   }
               }
           ]/**SCHEMA_DIFF*/
       };
   });

   ContactPageV2 (option 2)

   define("ContactPageV2", [], function () {
       return {
           /* The name of the record page entity schema. */
           entitySchemaName: "Contact",
           /* The tooltip view. */
           diff: /**SCHEMA_DIFF*/[
               /* Properties to add the tooltip to the button. */
               {
                   /* Run the operation that modifies the existing element. */
                   "operation": "merge",
                   /* The meta name of the parent container to add the button. */
                   "parentName": "LeftContainer",
                   /* Add the button to the element collection of the parent element. */
                   "propertyName": "items",
                   /* The meta name of the changed button. */
                   "name": "SaveButton",
                   /* The properties to pass to the element’s constructor. */
                   "values": {
                       /* The tooltip array for the button. */
                       "tips": []
                   }
               },
               /* The configuration object for a simple tooltip. */
               {
                   /* Run the operation that inserts the element. */
                   "operation": "insert",
                   /* The meta name of the added button. */
                   "parentName": "SaveButton",
                   /* Add the tooltip to the element collection of the parent element. */
                   "propertyName": "tips",
                   /* The meta name of the added tooltip. */
                   "name": "CustomShowedTip",
                   /* The properties to pass to the element’s constructor. */
                   "values": {
                       /* The tooltip text. */
                       "content": {"bindTo": "Resources.Strings.SaveButtonHint"}
                       /* Here, you can additionally configure other parameters for the tooltip view and logic. */
                   }
               },
           ]/**SCHEMA_DIFF*/
       };
   });

6. Click Save on the Designer’s toolbar.

Outcome of the example

As a result, Creatio will add a tooltip to the Save button of the contact page.

---

Resources

Package with example implementation