diff --git a/web/chat/message-reply-button.react.js b/web/chat/message-reply-button.react.js
deleted file mode 100644
--- a/web/chat/message-reply-button.react.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import { createMessageReply } from 'lib/shared/message-utils';
-
-import CommIcon from '../CommIcon.react.js';
-import type { InputState } from '../input/input-state';
-import css from './chat-message-list.css';
-import type { OnMessagePositionWithContainerInfo } from './position-types';
-
-type Props = {
-  +messagePositionInfo: OnMessagePositionWithContainerInfo,
-  +onReplyClick: () => void,
-  +inputState: InputState,
-};
-function MessageReplyButton(props: Props): React.Node {
-  const { inputState, onReplyClick, messagePositionInfo } = props;
-  const { addReply } = inputState;
-
-  const { item } = messagePositionInfo;
-  const replyClicked = React.useCallback(() => {
-    invariant(item.messageInfo.text, 'text should be set in message clicked');
-    addReply(createMessageReply(item.messageInfo.text));
-    onReplyClick();
-  }, [addReply, item, onReplyClick]);
-
-  return (
-    <div className={css.messageActionLinkIcon} onClick={replyClicked}>
-      <CommIcon icon="reply-filled" size={18} />
-    </div>
-  );
-}
-
-export default MessageReplyButton;
diff --git a/web/chat/message-timestamp-tooltip.css b/web/chat/message-timestamp-tooltip.css
deleted file mode 100644
--- a/web/chat/message-timestamp-tooltip.css
+++ /dev/null
@@ -1,53 +0,0 @@
-div.messageLeftTooltip:after {
-  top: 7px;
-  right: -14px;
-  border-color: transparent transparent transparent var(--tool-tip-bg);
-}
-div.messageRightTooltip:after {
-  top: 7px;
-  left: -14px;
-  border-color: transparent var(--tool-tip-bg) transparent transparent;
-}
-div.messageTopLeftTooltip:after {
-  bottom: -14px;
-  left: 4px;
-  border-color: var(--tool-tip-bg) transparent transparent transparent;
-}
-div.messageTopRightTooltip:after {
-  bottom: -14px;
-  right: 4px;
-  border-color: var(--tool-tip-bg) transparent transparent transparent;
-}
-div.messageBottomLeftTooltip:after {
-  top: -14px;
-  left: 4px;
-  border-color: transparent transparent var(--tool-tip-bg) transparent;
-}
-div.messageBottomRightTooltip:after {
-  top: -14px;
-  right: 4px;
-  border-color: transparent transparent var(--tool-tip-bg) transparent;
-}
-
-div.messageActionActiveArea {
-  position: absolute;
-  display: flex;
-  top: 0;
-  bottom: 0;
-  align-items: center;
-  padding: 0 12px;
-}
-
-div.viewerMessageActionActiveArea {
-  right: 100%;
-}
-div.nonViewerMessageActiveArea {
-  left: 100%;
-}
-div.messageActionActiveArea > div + div {
-  margin-left: 4px;
-}
-
-div.messageActionLinkIcon:hover {
-  cursor: pointer;
-}
diff --git a/web/chat/message-timestamp-tooltip.react.js b/web/chat/message-timestamp-tooltip.react.js
deleted file mode 100644
--- a/web/chat/message-timestamp-tooltip.react.js
+++ /dev/null
@@ -1,148 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import { isComposableMessageType } from 'lib/types/message-types';
-import { longAbsoluteDate } from 'lib/utils/date-utils';
-
-import css from './message-timestamp-tooltip.css';
-import type { OnMessagePositionWithContainerInfo } from './position-types';
-import {
-  type TooltipPosition,
-  tooltipPositions,
-  sizeOfTooltipArrow,
-} from './tooltip-utils';
-import {
-  TooltipMenu,
-  type TooltipStyle,
-  TooltipTextItem,
-} from './tooltip.react';
-
-const availablePositionsForComposedViewerMessage = [tooltipPositions.LEFT];
-const availablePositionsForNonComposedOrNonViewerMessage = [
-  tooltipPositions.RIGHT_BOTTOM,
-];
-
-type Props = {
-  +messagePositionInfo: OnMessagePositionWithContainerInfo,
-  +timeZone: ?string,
-};
-function MessageTimestampTooltip(props: Props): React.Node {
-  const { messagePositionInfo, timeZone } = props;
-  const { time, creator, type } = messagePositionInfo.item.messageInfo;
-
-  const text = React.useMemo(() => longAbsoluteDate(time, timeZone), [
-    time,
-    timeZone,
-  ]);
-  const availableTooltipPositions = React.useMemo(() => {
-    const { isViewer } = creator;
-    const isComposed = isComposableMessageType(type);
-    return isComposed && isViewer
-      ? availablePositionsForComposedViewerMessage
-      : availablePositionsForNonComposedOrNonViewerMessage;
-  }, [creator, type]);
-
-  const { messagePosition, containerPosition } = messagePositionInfo;
-  const pointingToInfo = React.useMemo(() => {
-    return {
-      containerPosition,
-      itemPosition: messagePosition,
-    };
-  }, [messagePosition, containerPosition]);
-
-  const getTooltipStyle = React.useCallback(
-    (tooltipPosition: TooltipPosition) =>
-      getTimestampTooltipStyle(messagePositionInfo, tooltipPosition),
-    [messagePositionInfo],
-  );
-  return (
-    <TooltipMenu
-      availableTooltipPositions={availableTooltipPositions}
-      targetPositionInfo={pointingToInfo}
-      layoutPosition="absolute"
-      getStyle={getTooltipStyle}
-    >
-      <TooltipTextItem text={text} />
-    </TooltipMenu>
-  );
-}
-
-function getTimestampTooltipStyle(
-  messagePositionInfo: OnMessagePositionWithContainerInfo,
-  tooltipPosition: TooltipPosition,
-): TooltipStyle {
-  const { messagePosition, containerPosition } = messagePositionInfo;
-  const { height: containerHeight, width: containerWidth } = containerPosition;
-
-  let style, className;
-  if (tooltipPosition === tooltipPositions.LEFT) {
-    const centerOfMessage = messagePosition.top + messagePosition.height / 2;
-    const tooltipPointing = Math.max(
-      Math.min(centerOfMessage, containerHeight),
-      0,
-    );
-    style = {
-      right: containerWidth - messagePosition.left + sizeOfTooltipArrow + 2,
-      bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
-    };
-    className = css.messageLeftTooltip;
-  } else if (tooltipPosition === tooltipPositions.RIGHT) {
-    const centerOfMessage = messagePosition.top + messagePosition.height / 2;
-    const tooltipPointing = Math.max(
-      Math.min(centerOfMessage, containerHeight),
-      0,
-    );
-    style = {
-      left: messagePosition.right + sizeOfTooltipArrow,
-      top: tooltipPointing,
-    };
-    className = css.messageRightTooltip;
-  } else if (tooltipPosition === tooltipPositions.LEFT_TOP) {
-    const tooltipPointing = Math.min(
-      containerHeight - messagePosition.top,
-      containerHeight,
-    );
-    style = {
-      left: messagePosition.left,
-      bottom: tooltipPointing + sizeOfTooltipArrow,
-    };
-    className = css.messageTopLeftTooltip;
-  } else if (tooltipPosition === tooltipPositions.RIGHT_TOP) {
-    const tooltipPointing = Math.min(
-      containerHeight - messagePosition.top,
-      containerHeight,
-    );
-    style = {
-      right: containerWidth - messagePosition.right,
-      bottom: tooltipPointing + sizeOfTooltipArrow,
-    };
-    className = css.messageTopRightTooltip;
-  } else if (tooltipPosition === tooltipPositions.LEFT_BOTTOM) {
-    const tooltipPointing = Math.min(messagePosition.bottom, containerHeight);
-    style = {
-      left: messagePosition.left,
-      top: tooltipPointing + sizeOfTooltipArrow,
-    };
-    className = css.messageBottomLeftTooltip;
-  } else if (tooltipPosition === tooltipPositions.RIGHT_BOTTOM) {
-    const centerOfMessage = messagePosition.top + messagePosition.height / 2;
-    const tooltipPointing = Math.max(
-      Math.min(centerOfMessage, containerHeight),
-      0,
-    );
-    style = {
-      left: messagePosition.right + sizeOfTooltipArrow + 2,
-      bottom: containerHeight - tooltipPointing - 5 * sizeOfTooltipArrow,
-    };
-    className = css.messageBottomRightTooltip;
-  }
-  invariant(
-    className && style,
-    `${tooltipPosition} is not valid for timestamp tooltip`,
-  );
-  return { className, style };
-}
-
-export default MessageTimestampTooltip;
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
@@ -63,7 +63,6 @@
   +actionButtonContent: React.Node,
 };
 
-const sizeOfTooltipArrow = 10; // 7px arrow + 3px extra
 const appTopBarHeight = 65;
 
 const font =
@@ -518,5 +517,4 @@
   useMessageTooltipReplyAction,
   useMessageTooltipActions,
   useMessageTooltip,
-  sizeOfTooltipArrow,
 };
diff --git a/web/chat/tooltip.css b/web/chat/tooltip.css
--- a/web/chat/tooltip.css
+++ b/web/chat/tooltip.css
@@ -1,50 +1,13 @@
-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.leftTooltipAlign > div {
+  align-items: flex-start;
 }
 
-div.messageLeftTooltip {
-  transform: translate(0%, -50%);
-}
-div.messageRightTooltip {
-  transform: translate(0%, -50%);
+div.centerTooltipAlign > div {
+  align-items: center;
 }
 
-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;
+div.rightTooltipAlign > div {
+  align-items: flex-end;
 }
 
 div.tooltipAbsolute {
diff --git a/web/chat/tooltip.react.js b/web/chat/tooltip.react.js
deleted file mode 100644
--- a/web/chat/tooltip.react.js
+++ /dev/null
@@ -1,86 +0,0 @@
-// @flow
-
-import classNames from 'classnames';
-import * as React from 'react';
-
-import type { ItemAndContainerPositionInfo } from './position-types';
-import { type TooltipPosition, tooltipPositions } 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 { getStyle, children } = props;
-
-  // eslint-disable-next-line no-unused-vars
-  const tooltipTexts = React.useMemo(
-    () => React.Children.map(children, item => item.props.text),
-    [children],
-  );
-
-  const tooltipPosition = React.useMemo(() => tooltipPositions.LEFT, []);
-
-  const tooltipStyle = React.useMemo(() => getStyle(tooltipPosition), [
-    getStyle,
-    tooltipPosition,
-  ]);
-
-  const className = React.useMemo(
-    () =>
-      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 };