diff --git a/web/chat/tooltip-utils.js b/web/chat/tooltip-utils.js
--- a/web/chat/tooltip-utils.js
+++ b/web/chat/tooltip-utils.js
@@ -2,6 +2,12 @@
 
 import * as React from 'react';
 
+import { calculateMaxTextWidth } from '../utils/text-utils';
+import {
+  tooltipButtonStyle,
+  tooltipLabelStyle,
+  tooltipStyle,
+} from './chat-constants';
 import type { PositionInfo } from './position-types';
 
 export const tooltipPositions = Object.freeze({
@@ -39,9 +45,8 @@
 const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
 const appTopBarHeight = 65;
 
-// eslint-disable-next-line no-unused-vars
 const font =
-  '14px -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' +
+  '14px "Inter", -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", ' +
   '"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", ui-sans-serif';
 
 type FindTooltipPositionArgs = {
@@ -173,5 +178,38 @@
   }
   return defaultPosition;
 }
+type CalculateTooltipSizeArgs = {
+  +tooltipLabels: $ReadOnlyArray<string>,
+  +timestamp: string,
+};
+
+function calculateTooltipSize({
+  tooltipLabels,
+  timestamp,
+}: CalculateTooltipSizeArgs): {
+  +width: number,
+  +height: number,
+} {
+  const textWidth =
+    calculateMaxTextWidth([...tooltipLabels, timestamp], font) +
+    2 * tooltipLabelStyle.padding;
+  const buttonsWidth =
+    tooltipLabels.length *
+    (tooltipButtonStyle.width +
+      tooltipButtonStyle.paddingLeft +
+      tooltipButtonStyle.paddingRight);
+  const width =
+    Math.max(textWidth, buttonsWidth) +
+    tooltipStyle.paddingLeft +
+    tooltipStyle.paddingRight;
+  const height =
+    (tooltipLabelStyle.height + 2 * tooltipLabelStyle.padding) * 2 +
+    tooltipStyle.rowGap * 2 +
+    tooltipButtonStyle.height;
+  return {
+    width,
+    height,
+  };
+}
 
-export { findTooltipPosition, sizeOfTooltipArrow };
+export { findTooltipPosition, calculateTooltipSize, sizeOfTooltipArrow };