diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index 98cc9adb3ec..f171b20899d 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
@@ -4,7 +4,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Icon, IconButton, useStyles2 } from '@grafana/ui';
+import { IconButton, useStyles2 } from '@grafana/ui';
 
 export interface QueryOperationRowHeaderProps {
   actionsElement?: React.ReactNode;
@@ -15,7 +15,7 @@ export interface QueryOperationRowHeaderProps {
   headerElement?: React.ReactNode;
   isContentVisible: boolean;
   onRowToggle: () => void;
-  reportDragMousePosition: MouseEventHandler<HTMLDivElement>;
+  reportDragMousePosition: MouseEventHandler<HTMLButtonElement>;
   title?: string;
   id: string;
 }
@@ -62,9 +62,11 @@ export const QueryOperationRowHeader = ({
       <Stack gap={1} alignItems="center" wrap={false}>
         {actionsElement}
         {draggable && (
-          <Icon
+          <IconButton
             title="Drag and drop to reorder"
             name="draggabledots"
+            tooltip="Drag and drop to reorder"
+            tooltipPlacement="bottom"
             size="lg"
             className={styles.dragIcon}
             onMouseMove={reportDragMousePosition}