Alerting: Use ToggleTip instead of Hovercard in the info popup on Math expressions (#70881)

* Use ToggleTip instead of Hovercard in the info popup on Math expressions

* Address review comments

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

@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import { Placement } from '@popperjs/core';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
@@ -28,6 +29,8 @@ export interface ToggletipProps {
   footer?: JSX.Element | string;
   /** The UI control users interact with to display toggletips */
   children: JSX.Element;
+  /** Determine whether the toggletip should fit its content or not */
+  fitContent?: boolean;
 }
 
 export const Toggletip = React.memo(
@@ -40,6 +43,7 @@ export const Toggletip = React.memo(
     closeButton = true,
     onClose,
     footer,
+    fitContent = false,
   }: ToggletipProps) => {
     const styles = useStyles2(getStyles);
     const style = styles[theme];
@@ -91,7 +95,7 @@ export const Toggletip = React.memo(
             <div
               data-testid="toggletip-content"
               ref={setTooltipRef}
-              {...getTooltipProps({ className: style.container })}
+              {...getTooltipProps({ className: cx(style.container, fitContent && styles.fitContent) })}
             >
               {Boolean(title) && <div className={style.header}>{title}</div>}
               {closeButton && (
@@ -139,5 +143,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
   return {
     info,
     error,
+    fitContent: css`
+      max-width: fit-content;
+    `,
   };
 };