diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.test.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.test.tsx
new file mode 100644
index 00000000000..9eb294be2e2
--- /dev/null
+++ b/public/app/plugins/panel/geomap/components/DataHoverView.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { ArrayDataFrame } from '@grafana/data';
+
+import { DataHoverView } from './DataHoverView';
+
+describe('DataHoverView component', () => {
+  it('should default to multi mode if mode is null or undefined', () => {
+    const data = new ArrayDataFrame([{ foo: 'bar' }]);
+    render(<DataHoverView data={data} rowIndex={0} />);
+
+    expect(screen.queryByText('bar')).toBeInTheDocument();
+  });
+});
diff --git a/public/app/plugins/panel/geomap/components/DataHoverView.tsx b/public/app/plugins/panel/geomap/components/DataHoverView.tsx
index b6b55960d51..9b1a9d3b9dd 100644
--- a/public/app/plugins/panel/geomap/components/DataHoverView.tsx
+++ b/public/app/plugins/panel/geomap/components/DataHoverView.tsx
@@ -61,7 +61,7 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode }:
   return (
     <table className={styles.infoWrap}>
       <tbody>
-        {(mode === TooltipDisplayMode.Multi || mode === null) &&
+        {(mode === TooltipDisplayMode.Multi || mode == null) &&
           displayValues.map((v, i) => (
             <tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}>
               <th>{v[0]}:</th>