Tooltip mode works in BarChart panel (#52941)

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -18,6 +18,7 @@ import {
   measureText,
   PlotLegend,
   Portal,
+  TooltipDisplayMode,
   UPlotConfigBuilder,
   UPLOT_AXIS_FONT_SIZE,
   usePanelContext,
@@ -175,6 +176,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
           rowIndex={datapointIdx}
           columnIndex={seriesIdx}
           sortOrder={options.tooltip.sort}
+          mode={options.tooltip.mode}
         />
       </>
     );
@@ -284,6 +286,10 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
           });
         }
 
+        if (options.tooltip.mode === TooltipDisplayMode.None) {
+          return null;
+        }
+
         return (
           <Portal>
             {hover && coords && (

public/app/plugins/panel/geomap/components/DataHoverView.tsx

@@ -10,7 +10,7 @@ import {
   GrafanaTheme2,
   LinkModel,
 } from '@grafana/data';
-import { SortOrder } from '@grafana/schema';
+import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
 import { LinkButton, useStyles2, VerticalGroup } from '@grafana/ui';
 
 export interface Props {
@@ -18,9 +18,10 @@ export interface Props {
   rowIndex?: number | null; // the hover row
   columnIndex?: number | null; // the hover column
   sortOrder?: SortOrder;
+  mode?: TooltipDisplayMode | null;
 }
 
-export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props) => {
+export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!data || rowIndex == null) {
@@ -60,12 +61,19 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder }: Props)
   return (
     <table className={styles.infoWrap}>
       <tbody>
-        {displayValues.map((v, i) => (
-          <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
-            <th>{v[0]}:</th>
-            <td>{v[2]}</td>
+        {(mode === TooltipDisplayMode.Multi || mode === null) &&
+          displayValues.map((v, i) => (
+            <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
+              <th>{v[0]}:</th>
+              <td>{v[2]}</td>
+            </tr>
+          ))}
+        {mode === TooltipDisplayMode.Single && columnIndex && (
+          <tr key={`${columnIndex}/${rowIndex}`}>
+            <th>{displayValues[columnIndex][0]}:</th>
+            <td>{displayValues[columnIndex][2]}</td>
           </tr>
-        ))}
+        )}
         {links.length > 0 && (
           <tr>
             <td colSpan={2}>