diff --git a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
index 6886774287e..15d5636b118 100644
--- a/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
+++ b/packages/grafana-ui/src/components/Table/JSONViewCell.tsx
@@ -1,13 +1,13 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { css, cx } from '@emotion/css';
 import { isString } from 'lodash';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
-import { useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
 import { TableCellProps } from './types';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const JSONViewCell: FC<TableCellProps> = (props) => {
+export function JSONViewCell(props: TableCellProps): JSX.Element {
   const { cell, tableStyles, cellProps } = props;
 
   const txt = css`
@@ -29,32 +29,38 @@ export const JSONViewCell: FC<TableCellProps> = (props) => {
   const content = <JSONTooltip value={value} />;
 
   return (
-    <div {...cellProps} className={tableStyles.cellContainer}>
-      <Tooltip placement="auto" content={content} theme="info-alt">
+    <Tooltip placement="auto-start" content={content} theme="info-alt">
+      <div {...cellProps} className={tableStyles.cellContainer}>
         <div className={cx(tableStyles.cellText, txt)}>{displayValue}</div>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   );
-};
+}
 
 interface PopupProps {
   value: any;
 }
 
-const JSONTooltip: FC<PopupProps> = (props) => {
-  const styles = useStyles((theme: GrafanaTheme) => {
-    return {
-      container: css`
-        padding: ${theme.spacing.xs};
-      `,
-    };
-  });
-
+function JSONTooltip(props: PopupProps): JSX.Element {
+  const styles = useStyles2(getStyles);
   return (
     <div className={styles.container}>
       <div>
-        <JSONFormatter json={props.value} open={4} />
+        <JSONFormatter json={props.value} open={4} className={styles.json} />
       </div>
     </div>
   );
-};
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css`
+      padding: ${theme.spacing(0.5)};
+    `,
+    json: css`
+      max-width: fit-content;
+      max-height: 70vh;
+      overflow-y: auto;
+    `,
+  };
+}