diff --git a/web/chat/tooltip.css b/web/chat/tooltip.css
index e22d2c918..518002577 100644
--- a/web/chat/tooltip.css
+++ b/web/chat/tooltip.css
@@ -1,36 +1,48 @@
 div.messageTooltipMenu {
   position: absolute;
   background-color: var(--tool-tip-bg);
   color: var(--tool-tip-color);
   padding: 5px;
   border-radius: 5px;
   font-size: 14px;
   z-index: 1;
   white-space: nowrap;
 }
 div.messageTooltipMenu ul {
   list-style: none;
 }
 div.messageTooltipMenu li:not(:last-child) {
   padding-bottom: 5px;
 }
 div.messageTooltipMenu button {
   border: none;
   cursor: pointer;
   font-size: 14px;
   outline: none;
   background-color: black;
   color: white;
   text-decoration: underline;
 }
 div.messageTooltipMenu button:hover {
   background-color: black;
   color: #129aff;
 }
 
 div.messageLeftTooltip {
   transform: translate(0%, -50%);
 }
 div.messageRightTooltip {
   transform: translate(0%, -50%);
 }
+
+div.messageTimestampTooltip {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  background-color: var(--message-action-tooltip-bg);
+  border-radius: 8px;
+  overflow: auto;
+  min-width: 72px;
+}
diff --git a/web/chat/tooltip.react.js b/web/chat/tooltip.react.js
index 9153f19c4..23922585c 100644
--- a/web/chat/tooltip.react.js
+++ b/web/chat/tooltip.react.js
@@ -1,100 +1,105 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ItemAndContainerPositionInfo } from './position-types';
 import { findTooltipPosition, type TooltipPosition } from './tooltip-utils';
 import css from './tooltip.css';
 
 type Style = {
   +left?: number,
   +right?: number,
   +top?: number,
   +bottom?: number,
 };
 export type TooltipStyle = { +className: string, +style?: Style };
 
 type TooltipMenuProps = {
   +availableTooltipPositions: $ReadOnlyArray<TooltipPosition>,
   +targetPositionInfo: ItemAndContainerPositionInfo,
   +layoutPosition: 'relative' | 'absolute',
   +getStyle: (tooltipPosition: TooltipPosition) => TooltipStyle,
   +children: React.ChildrenArray<
     React.Element<typeof TooltipButton | typeof TooltipTextItem>,
   >,
 };
 function TooltipMenu(props: TooltipMenuProps): React.Node {
   const {
     availableTooltipPositions,
     targetPositionInfo,
     layoutPosition,
     getStyle,
     children,
   } = props;
 
   const tooltipTexts = React.useMemo(
     () => React.Children.map(children, item => item.props.text),
     [children],
   );
 
   const tooltipPosition = React.useMemo(
     () =>
       findTooltipPosition({
         pointingToInfo: targetPositionInfo,
         tooltipTexts,
         availablePositions: availableTooltipPositions,
         layoutPosition,
       }),
     [
       tooltipTexts,
       targetPositionInfo,
       availableTooltipPositions,
       layoutPosition,
     ],
   );
 
   const tooltipStyle = React.useMemo(() => getStyle(tooltipPosition), [
     getStyle,
     tooltipPosition,
   ]);
 
   const className = React.useMemo(
-    () => classNames(css.messageTooltipMenu, tooltipStyle.className),
+    () =>
+      classNames(
+        css.messageTooltipMenu,
+        tooltipStyle.className,
+        css.messageTimestampTooltip,
+      ),
     [tooltipStyle],
   );
 
   const style = tooltipStyle.style ? tooltipStyle.style : null;
 
   return (
     <div className={className} style={style}>
       <ul>{children}</ul>
     </div>
   );
 }
 
 type TooltipButtonProps = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => void,
   +text: string,
 };
 function TooltipButton(props: TooltipButtonProps): React.Node {
   const { onClick, text } = props;
   return (
     <li>
       <button onClick={onClick}>{text}</button>
     </li>
   );
 }
 
 type TooltipTextItemProps = {
   +text: string,
 };
 function TooltipTextItem(props: TooltipTextItemProps): React.Node {
   return (
     <li>
       <span>{props.text}</span>
     </li>
   );
 }
 
 export { TooltipMenu, TooltipButton, TooltipTextItem };