Add tooltip to instances of IconButton (#68880)

* refactor: tooltip is required

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: adjust tests

* refactor: apply changes from code review

* refactor: adjust component for e2e test

* refactor: adjust fallback

* refactor: apply changes from code review

* refactor: apply changes from code review

* refactor: set IconButton default as type=button and remove from use cases

* refactor:  remove aria-labels when duplicated and type=button from use cases

* refactor: clean up

* refactor: fix tests

* refactor: fix type errors

* refactor: remove changes in order in order to add them to a separate PR

* refactor: set IconButton default as type=button

* refactor: remove tooltip

* refactor: apply changes requested in review

public/app/plugins/panel/canvas/editor/element/QuickPositioning.tsx

@@ -65,45 +65,45 @@ export const QuickPositioning = ({ onPositionChange, element, settings }: Props)
   return (
     <div className={styles.buttonGroup}>
       <IconButton
-        name={'horizontal-align-left'}
+        name="horizontal-align-left"
         onClick={() => onQuickPositioningChange(QuickPlacement.Left)}
         className={styles.button}
-        size={'lg'}
-        tooltip={'Align left'}
+        size="lg"
+        tooltip="Align left"
       />
       <IconButton
-        name={'horizontal-align-center'}
+        name="horizontal-align-center"
         onClick={() => onQuickPositioningChange(QuickPlacement.HorizontalCenter)}
         className={styles.button}
-        size={'lg'}
-        tooltip={'Align horizontal centers'}
+        size="lg"
+        tooltip="Align horizontal centers"
       />
       <IconButton
-        name={'horizontal-align-right'}
+        name="horizontal-align-right"
         onClick={() => onQuickPositioningChange(QuickPlacement.Right)}
         className={styles.button}
-        size={'lg'}
-        tooltip={'Align right'}
+        size="lg"
+        tooltip="Align right"
       />
       <IconButton
-        name={'vertical-align-top'}
+        name="vertical-align-top"
         onClick={() => onQuickPositioningChange(QuickPlacement.Top)}
-        size={'lg'}
-        tooltip={'Align top'}
+        size="lg"
+        tooltip="Align top"
       />
       <IconButton
-        name={'vertical-align-center'}
+        name="vertical-align-center"
         onClick={() => onQuickPositioningChange(QuickPlacement.VerticalCenter)}
         className={styles.button}
-        size={'lg'}
-        tooltip={'Align vertical centers'}
+        size="lg"
+        tooltip="Align vertical centers"
       />
       <IconButton
-        name={'vertical-align-bottom'}
+        name="vertical-align-bottom"
         onClick={() => onQuickPositioningChange(QuickPlacement.Bottom)}
         className={styles.button}
-        size={'lg'}
-        tooltip={'Align bottom'}
+        size="lg"
+        tooltip="Align bottom"
       />
     </div>
   );

public/app/plugins/panel/canvas/editor/inline/InlineEdit.tsx

@@ -84,7 +84,13 @@ export function InlineEdit({ onClose, id, scene }: Props) {
               <strong className={styles.inlineEditorHeader}>
                 <div className={styles.placeholder} />
                 <div>Canvas Inline Editor</div>
-                <IconButton name="times" size="xl" className={styles.inlineEditorClose} onClick={onClose} />
+                <IconButton
+                  name="times"
+                  size="xl"
+                  className={styles.inlineEditorClose}
+                  onClick={onClose}
+                  tooltip="Close inline editor"
+                />
               </strong>
               <div className={styles.inlineEditorContentWrapper}>
                 <div className={styles.inlineEditorContent}>

public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx

@@ -73,15 +73,17 @@ export const TreeNodeTitle = ({ settings, nodeData, setAllowSelection }: Props)
         <div className={styles.actionButtonsWrapper}>
           <IconButton
             name="copy"
-            title={'Duplicate'}
+            title="Duplicate"
             className={styles.actionIcon}
             onClick={() => onDuplicate(element)}
+            tooltip="Duplicate"
           />
           <IconButton
             name="trash-alt"
-            title={'remove'}
+            title="remove"
             className={styles.actionIcon}
             onClick={() => onDelete(element)}
+            tooltip="Remove"
           />
         </div>
       )}