From 76e102d1a3df1b4fce52f9d0e34c2d27e0d9ac0e Mon Sep 17 00:00:00 2001
From: Krishna Dhakal <7krishna7dhakal7@gmail.com>
Date: Thu, 5 Oct 2023 20:16:16 +0545
Subject: [PATCH] Explore: A tooltip for reorder icon in query operation
 (#75978)

* tooltip in draggabledots icon

* making it a IconButton
---
 .../QueryOperationRow/QueryOperationRowHeader.tsx         | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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}