Add a button tooltip

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)

   ContactPageV2 (option 2)

   Code copied

   define("ContactPageV2", [], function () {
       return {
           /* The name of the record page entity schema. */
           entitySchemaName: "Contact",
           /* The tooltip view. */
           diff: /**SCHEMA_DIFF*/[
               /* Metadata 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*/
       };
   });

   Code copied

   define("ContactPageV2", [], function () {
       return {
           /* The name of the record page entity schema. */
           entitySchemaName: "Contact",
           /* The tooltip view. */
           diff: /**SCHEMA_DIFF*/[
               /* Metadata 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.