Prometheus: Query builder operation docs popover improvements (#46006)

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx

@@ -3,8 +3,7 @@ import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
 import { FlexItem } from '@grafana/experimental';
 import { Button, Portal, useStyles2 } from '@grafana/ui';
 import React, { useState } from 'react';
-import { usePopper } from 'react-popper';
+import { usePopperTooltip } from 'react-popper-tooltip';
-import { useToggle } from 'react-use';
 import { QueryBuilderOperation, QueryBuilderOperationDef } from './types';
 
 export interface Props {
@@ -14,41 +13,39 @@ export interface Props {
 
 export const OperationInfoButton = React.memo<Props>(({ def, operation }) => {
   const styles = useStyles2(getStyles);
-  const [popperTrigger, setPopperTrigger] = useState<HTMLButtonElement | null>(null);
+  const [show, setShow] = useState(false);
-  const [popover, setPopover] = useState<HTMLDivElement | null>(null);
+  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
-  const [isOpen, toggleIsOpen] = useToggle(false);
-
-  const popper = usePopper(popperTrigger, popover, {
     placement: 'top',
-    modifiers: [
+    visible: show,
-      { name: 'arrow', enabled: true },
+    offset: [0, 16],
-      {
+    onVisibleChange: setShow,
-        name: 'preventOverflow',
+    interactive: true,
-        enabled: true,
+    trigger: ['click'],
-        options: {
-          rootBoundary: 'viewport',
-        },
-      },
-    ],
   });
 
   return (
     <>
       <Button
-        ref={setPopperTrigger}
+        title="Click to show description"
+        ref={setTriggerRef}
         icon="info-circle"
         size="sm"
         variant="secondary"
         fill="text"
-        onClick={toggleIsOpen}
       />
-      {isOpen && (
+      {visible && (
         <Portal>
-          <div ref={setPopover} style={popper.styles.popper} {...popper.attributes.popper} className={styles.docBox}>
+          <div ref={setTooltipRef} {...getTooltipProps()} className={styles.docBox}>
             <div className={styles.docBoxHeader}>
               <span>{def.renderer(operation, def, '<expr>')}</span>
               <FlexItem grow={1} />
-              <Button icon="times" onClick={toggleIsOpen} fill="text" variant="secondary" title="Remove operation" />
+              <Button
+                icon="times"
+                onClick={() => setShow(false)}
+                fill="text"
+                variant="secondary"
+                title="Remove operation"
+              />
             </div>
             <div
               className={styles.docBoxBody}
@@ -67,9 +64,9 @@ const getStyles = (theme: GrafanaTheme2) => {
   return {
     docBox: css({
       overflow: 'hidden',
-      background: theme.colors.background.canvas,
+      background: theme.colors.background.primary,
       border: `1px solid ${theme.colors.border.strong}`,
-      boxShadow: theme.shadows.z2,
+      boxShadow: theme.shadows.z3,
       maxWidth: '600px',
       padding: theme.spacing(1),
       borderRadius: theme.shape.borderRadius(),