Data Grid - Column Headers - Add tooltip on hover opensearch-project#809

Signed-off-by: keskami <[email protected]>
keskami · Oct 31, 2023 · c054ae7 · c054ae7
1 parent 617ce9b
commit c054ae7
Showing 1 changed file with 66 additions and 63 deletions.
diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
@@ -55,6 +55,7 @@ import {
   DataGridFocusContext,
   DataGridSortingContext,
 } from './data_grid_context';
+import { OuiToolTip } from '../tool_tip';
 
 export interface OuiDataGridHeaderCellProps
   extends Omit<
@@ -311,70 +312,72 @@ export const OuiDataGridHeaderCell: FunctionComponent<OuiDataGridHeaderCellProps
   ) : null;
 
   return (
-    <div
-      role="columnheader"
-      {...ariaProps}
-      ref={headerRef}
-      tabIndex={isFocused && !isCellEntered ? 0 : -1}
-      className={classes}
-      data-test-subj={`dataGridHeaderCell-${id}`}
-      style={width != null ? { width: `${width}px` } : {}}>
-      {column.isResizable !== false && width != null ? (
-        <OuiDataGridColumnResizer
-          columnId={id}
-          columnWidth={width}
-          setColumnWidth={setColumnWidth}
-        />
-      ) : null}
+    <OuiToolTip position="top" content={id}>
+      <div
+        role="columnheader"
+        {...ariaProps}
+        ref={headerRef}
+        tabIndex={isFocused && !isCellEntered ? 0 : -1}
+        className={classes}
+        data-test-subj={`dataGridHeaderCell-${id}`}
+        style={width != null ? { width: `${width}px` } : {}}>
+        {column.isResizable !== false && width != null ? (
+          <OuiDataGridColumnResizer
+            columnId={id}
+            columnWidth={width}
+            setColumnWidth={setColumnWidth}
+          />
+        ) : null}
 
-      {sorting && sorting.columns.length >= 2 && (
-        <OuiScreenReaderOnly>
-          <div id={screenReaderId}>{sortString}</div>
-        </OuiScreenReaderOnly>
-      )}
-      {!showColumnActions ? (
-        <>
-          {sortingArrow}
-          <div className="ouiDataGridHeaderCell__content">
-            {display || displayAsText || id}
-          </div>
-        </>
-      ) : (
-        <OuiPopover
-          anchorClassName="ouiDataGridHeaderCell__anchor"
-          panelPaddingSize="none"
-          offset={7}
-          button={
-            <button
-              className="ouiDataGridHeaderCell__button"
-              onClick={() =>
-                setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)
-              }>
-              {sortingArrow}
-              <div className="ouiDataGridHeaderCell__content">
-                {display || displayAsText || id}
-              </div>
-              <OuiIcon
-                className="ouiDataGridHeaderCell__icon"
-                type="arrowDown"
-                size="s"
-                color="text"
-                aria-label={actionButtonAriaLabel}
-                data-test-subj={`dataGridHeaderCellActionButton-${id}`}
+        {sorting && sorting.columns.length >= 2 && (
+          <OuiScreenReaderOnly>
+            <div id={screenReaderId}>{sortString}</div>
+          </OuiScreenReaderOnly>
+        )}
+        {!showColumnActions ? (
+          <>
+            {sortingArrow}
+            <div className="ouiDataGridHeaderCell__content">
+              {display || displayAsText || id}
+            </div>
+          </>
+        ) : (
+          <OuiPopover
+            anchorClassName="ouiDataGridHeaderCell__anchor"
+            panelPaddingSize="none"
+            offset={7}
+            button={
+              <button
+                className="ouiDataGridHeaderCell__button"
+                onClick={() =>
+                  setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)
+                }>
+                {sortingArrow}
+                <div className="ouiDataGridHeaderCell__content">
+                  {display || displayAsText || id}
+                </div>
+                <OuiIcon
+                  className="ouiDataGridHeaderCell__icon"
+                  type="arrowDown"
+                  size="s"
+                  color="text"
+                  aria-label={actionButtonAriaLabel}
+                  data-test-subj={`dataGridHeaderCellActionButton-${id}`}
+                />
+              </button>
+            }
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}>
+            <div>
+              <OuiListGroup
+                listItems={columnActions}
+                gutterSize="none"
+                data-test-subj={`dataGridHeaderCellActionGroup-${id}`}
               />
-            </button>
-          }
-          isOpen={isPopoverOpen}
-          closePopover={() => setIsPopoverOpen(false)}>
-          <div>
-            <OuiListGroup
-              listItems={columnActions}
-              gutterSize="none"
-              data-test-subj={`dataGridHeaderCellActionGroup-${id}`}
-            />
-          </div>
-        </OuiPopover>
-      )}
-    </div>
+            </div>
+          </OuiPopover>
+        )}
+      </div>
+    </OuiToolTip>
   );
 };