fix(inline-editable): add tooltips for controls (#10538)

**Related Issue:** #10536

## Summary

- add `title` attribute for controls
- change message text to remove "click to"
- add test

Author: driskull

packages/calcite-components/src/components/inline-editable/assets/inline-editable/t9n/messages.json

@@ -1,5 +1,5 @@
 {
-  "enableEditing": "Click to edit",
+  "enableEditing": "Edit",
   "cancelEditing": "Cancel",
   "confirmChanges": "Save"
 }

packages/calcite-components/src/components/inline-editable/assets/inline-editable/t9n/messages_en.json

@@ -1,5 +1,5 @@
 {
-  "enableEditing": "Click to edit",
+  "enableEditing": "Edit",
   "cancelEditing": "Cancel",
   "confirmChanges": "Save"
 }

packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts

@@ -65,6 +65,22 @@ describe("calcite-inline-editable", () => {
       }
     });
 
+    it("should set title attributes for controls", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-inline-editable controls editing-enabled>
+          <calcite-input />
+        </calcite-inline-editable>`,
+      });
+
+      const buttons = await page.findAll("calcite-inline-editable >>> calcite-button");
+
+      expect(buttons).toHaveLength(3);
+
+      for (const button of buttons) {
+        expect(await button.getProperty("title")).toBeTruthy();
+      }
+    });
+
     it("uses a child input's scale when none are provided", async () => {
       page = await newE2EPage();
       await page.setContent(`

packages/calcite-components/src/components/inline-editable/inline-editable.tsx

@@ -176,6 +176,7 @@ export class InlineEditable
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
               }}
+              title={this.messages.enableEditing}
               type="button"
             />
             {this.shouldShowControls && [
@@ -190,6 +191,7 @@ export class InlineEditable
                   onClick={this.cancelEditingHandler}
                   ref={(el) => (this.cancelEditingButton = el)}
                   scale={this.scale}
+                  title={this.messages.cancelEditing}
                   type="button"
                 />
               </div>,
@@ -204,6 +206,7 @@ export class InlineEditable
                 onClick={this.confirmChangesHandler}
                 ref={(el) => (this.confirmEditingButton = el)}
                 scale={this.scale}
+                title={this.messages.confirmChanges}
                 type="button"
               />,
             ]}