grafana/ui: Fix RelativeTimeRange supported formats (#44535)

* remove link to docs site

* extract tooltip to component

* text and formatting

* use div instead of p

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -18,6 +18,7 @@ import {
 import { Field } from '../../Forms/Field';
 import { getInputStyles, Input } from '../../Input/Input';
 import { Icon } from '../../Icon/Icon';
+import { Tooltip } from '../../Tooltip/Tooltip';
 
 /**
  * @internal
@@ -115,14 +116,13 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): Re
               </CustomScrollbar>
               <div className={styles.rightSide}>
                 <div className={styles.title}>
-                  <TimePickerTitle>Specify time range</TimePickerTitle>
-                  <div className={styles.description}>
-                    Specify a relative time range, for more information see{' '}
-                    <a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/">
-                      docs <Icon name="external-link-alt" />
-                    </a>
-                    .
-                  </div>
+                  <TimePickerTitle>
+                    <Tooltip content={<TooltipContent />} placement="bottom" theme="info">
+                      <div>
+                        Specify time range <Icon name="info-circle" />
+                      </div>
+                    </Tooltip>
+                  </TimePickerTitle>
                 </div>
                 <Field label="From" invalid={!from.validation.isValid} error={from.validation.errorMessage}>
                   <Input
@@ -152,6 +152,38 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): Re
   );
 }
 
+const TooltipContent = () => {
+  const styles = useStyles2(toolTipStyles);
+  return (
+    <>
+      <div className={styles.supported}>
+        Supported formats: <code className={styles.tooltip}>now-[digit]s/m/h/d/w</code>
+      </div>
+      <div>Example: to select a time range from 10 minutes ago to now</div>
+      <code className={styles.tooltip}>From: now-10m To: now</code>
+      <div className={styles.link}>
+        For more information see{' '}
+        <a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/">
+          docs <Icon name="external-link-alt" />
+        </a>
+        .
+      </div>
+    </>
+  );
+};
+
+const toolTipStyles = (theme: GrafanaTheme2) => ({
+  supported: css`
+    margin-bottom: ${theme.spacing(1)};
+  `,
+  tooltip: css`
+    margin: 0;
+  `,
+  link: css`
+    margin-top: ${theme.spacing(1)};
+  `,
+});
+
 const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme2) => {
   const inputStyles = getInputStyles({ theme, invalid: false });
   const bodyMinimumHeight = 250;