Grafana-UI: Add tooltip for interval picker in RefreshPicker (#74534)

* feat: add tooltip for interval picker

* refactor: remove ts error

* feat: extract new translations

* refactor: deprecate unused tooltip property

* refactor: correct syntax of dynamic string

* refactor: remove interval and autogenerated strings

* refactor: localisation

* refactor

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -20,9 +20,11 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
   options: Array<SelectableValue<T>>;
   value?: SelectableValue<T>;
   onChange: (item: SelectableValue<T>) => void;
+  /** @deprecated use tooltip instead, tooltipContent is not being processed in ToolbarButton*/
   tooltipContent?: PopoverContent;
   narrow?: boolean;
   variant?: ToolbarButtonVariant;
+  tooltip?: string;
 }
 
 /**

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -101,6 +101,10 @@ export class RefreshPicker extends PureComponent<Props> {
     );
     const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
 
+    const tooltipIntervalSelected = t('refresh-picker.tooltip.interval-selected', 'Set auto refresh interval');
+    const tooltipAutoRefreshOff = t('refresh-picker.tooltip.turned-off', 'Auto refresh off');
+    const tooltipAutoRefresh = selectedValue.value === '' ? tooltipAutoRefreshOff : tooltipIntervalSelected;
+
     return (
       <ButtonGroup className="refresh-picker">
         <ToolbarButton
@@ -120,9 +124,9 @@ export class RefreshPicker extends PureComponent<Props> {
             options={options}
             onChange={this.onChangeSelect}
             variant={variant}
-            title={t('refresh-picker.select-button.auto-refresh', 'Set auto refresh interval')}
             data-testid={selectors.components.RefreshPicker.intervalButtonV2}
             aria-label={ariaLabel}
+            tooltip={tooltipAutoRefresh}
           />
         )}
       </ButtonGroup>