feat: make tooltip links in query variable editor clickable

packages/grafana-ui/src/components/Forms/InlineField.tsx

@@ -23,6 +23,8 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
   /** Error message to display */
   error?: string | null;
   htmlFor?: string;
+  /** Make tooltip interactive */
+  interactive?: boolean;
 }
 
 export const InlineField: FC<Props> = ({
@@ -38,6 +40,7 @@ export const InlineField: FC<Props> = ({
   grow,
   error,
   transparent,
+  interactive,
   ...htmlProps
 }) => {
   const theme = useTheme2();
@@ -46,7 +49,13 @@ export const InlineField: FC<Props> = ({
 
   const labelElement =
     typeof label === 'string' ? (
-      <InlineLabel width={labelWidth} tooltip={tooltip} htmlFor={inputId} transparent={transparent}>
+      <InlineLabel
+        interactive={interactive}
+        width={labelWidth}
+        tooltip={tooltip}
+        htmlFor={inputId}
+        transparent={transparent}
+      >
         {label}
       </InlineLabel>
     ) : (

packages/grafana-ui/src/components/Forms/InlineLabel.tsx

@@ -23,6 +23,8 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   /** @deprecated */
   /** This prop is deprecated and is not used anymore */
   isInvalid?: boolean;
+  /** Make tooltip interactive */
+  interactive?: boolean;
   /** @beta */
   /** Controls which element the InlineLabel should be rendered into */
   as?: React.ElementType;
@@ -34,6 +36,7 @@ export const InlineLabel: FunctionComponent<Props> = ({
   tooltip,
   width,
   transparent,
+  interactive,
   as: Component = 'label',
   ...rest
 }) => {
@@ -43,7 +46,7 @@ export const InlineLabel: FunctionComponent<Props> = ({
     <Component className={cx(styles.label, className)} {...rest}>
       {children}
       {tooltip && (
-        <Tooltip placement="top" content={tooltip} theme="info">
+        <Tooltip interactive={interactive} placement="top" content={tooltip} theme="info">
           <Icon tabIndex={0} name="info-circle" size="sm" className={styles.icon} />
         </Tooltip>
       )}

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.tsx

@@ -166,6 +166,7 @@ export const VariableQueryEditor = ({ query, datasource, onChange }: Props) => {
             placeholder="attribute name"
             onBlur={(value: string) => onQueryChange({ ...parsedQuery, attributeName: value })}
             label="Attribute Name"
+            interactive={true}
             tooltip={
               <>
                 {'Attribute or tag to query on. Tags should be formatted "Tags.<name>". '}

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableTextField.tsx

@@ -10,12 +10,20 @@ interface VariableTextFieldProps {
   value: string;
   label: string;
   tooltip?: PopoverContent;
+  interactive?: boolean;
 }
 
-export const VariableTextField: FC<VariableTextFieldProps> = ({ label, onBlur, placeholder, value, tooltip }) => {
+export const VariableTextField: FC<VariableTextFieldProps> = ({
+  interactive,
+  label,
+  onBlur,
+  placeholder,
+  value,
+  tooltip,
+}) => {
   const [localValue, setLocalValue] = useState(value);
   return (
-    <InlineField label={label} labelWidth={LABEL_WIDTH} tooltip={tooltip} grow>
+    <InlineField interactive={interactive} label={label} labelWidth={LABEL_WIDTH} tooltip={tooltip} grow>
       <Input
         aria-label={label}
         placeholder={placeholder}