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,7 @@
 
 import * as React from 'react';
 
+import { calculateMaxTextWidth } from '../utils/text-utils';
 import type { PositionInfo } from './position-types';
 
 export const tooltipPositions = Object.freeze({
@@ -37,11 +38,17 @@
 };
 
 const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
+const tooltipPadding = 5;
+const tooltipLabelPadding = 6;
+const tooltipButtonPadding = 6;
+const tooltipButtonWidth = 30;
+const tooltipLabelHeight = 32;
+const tooltipButtonHeight = 38;
+const tooltipRowGap = 3;
 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 = {
@@ -171,5 +178,30 @@
   }
   return null;
 }
+type CalculateTooltipSizeArgs = {
+  +tooltipLabels: $ReadOnlyArray<string>,
+  +timestamp: string,
+};
+
+function calculateTooltipSize({
+  tooltipLabels,
+  timestamp,
+}: CalculateTooltipSizeArgs): {
+  width: number,
+  height: number,
+} {
+  const textWidth =
+    calculateMaxTextWidth([...tooltipLabels, timestamp], font) +
+    2 * tooltipLabelPadding;
+  const buttonsWidth =
+    tooltipLabels.length * tooltipButtonWidth + 2 * tooltipButtonPadding;
+  const width = Math.max(textWidth, buttonsWidth) + 2 * tooltipPadding;
+  const height =
+    tooltipLabelHeight * 2 + tooltipRowGap * 2 + tooltipButtonHeight;
+  return {
+    width,
+    height,
+  };
+}
 
-export { findTooltipPosition, sizeOfTooltipArrow };
+export { findTooltipPosition, calculateTooltipSize, sizeOfTooltipArrow };