diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index d303e6786..abead28d0 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -19,6 +19,7 @@ import usePrevious from "./hooks/usePrevious";
 import Hoverable from "./Hoverable";
 import Icon from "./Icon";
 import { IconName, IconPosition } from "./IconShared";
+import Tooltip from "./Tooltip";
 
 export type ButtonPendingActivationState = "hover" | "pressed" | null;
 
@@ -50,6 +51,7 @@ export type ButtonProps = ButtonContents &
     numberOfLines?: number;
     ellipsizeMode?: TextProps["ellipsizeMode"];
     focusOnMount?: boolean;
+    tooltipText?: string;
   };
 
 const pressedButtonOpacity = 0.2;
@@ -196,7 +198,7 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(function Button(props: ButtonProps) {
-  const { onPendingInteractionStateDidChange, style } = props;
+  const { onPendingInteractionStateDidChange, style, tooltipText } = props;
   const ref = React.useRef<View | null>(null);
   const href = "href" in props ? props.href : null;
   const onPress = "onPress" in props ? props.onPress : null;
@@ -280,11 +282,22 @@ export default React.memo(function Button(props: ButtonProps) {
           style={[isSoloIcon && styles.soloIcon, style]}
         >
           {({ pressed }) => (
-            <ButtonInterior
-              {...props}
-              isHovered={isHovered}
-              isPressed={pressed}
-            />
+            <React.Fragment>
+              {tooltipText && (
+                <Tooltip
+                  anchorRef={ref}
+                  show={isHovered}
+                  placement="inset-bottom-right"
+                >
+                  {tooltipText}
+                </Tooltip>
+              )}
+              <ButtonInterior
+                {...props}
+                isHovered={isHovered}
+                isPressed={pressed}
+              />
+            </React.Fragment>
           )}
         </Pressable>
       )}
diff --git a/packages/ui/src/components/ReviewButtonBar.tsx b/packages/ui/src/components/ReviewButtonBar.tsx
index f35d0ea7d..64a73ba41 100644
--- a/packages/ui/src/components/ReviewButtonBar.tsx
+++ b/packages/ui/src/components/ReviewButtonBar.tsx
@@ -168,6 +168,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
               dispatchPendingMarkingInteraction();
             }}
             hitSlop={firstButtonSlop}
+            tooltipText={"Shortcut: 1"}
           />
           {spacer}
           <Button
@@ -186,6 +187,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
               dispatchPendingMarkingInteraction();
             }}
             hitSlop={secondButtonSlop}
+            tooltipText={"Shortcut: Space or 2"}
           />
         </>
       );
@@ -199,6 +201,7 @@ const ReviewButtonBar = React.memo(function ReviewButtonArea({
             title={"Show answer"}
             key={"Show answer"}
             hitSlop={secondButtonSlop}
+            tooltipText={"Shortcut: Space"}
           />
         </>
       );
diff --git a/packages/ui/src/components/Tooltip.stories.tsx b/packages/ui/src/components/Tooltip.stories.tsx
new file mode 100644
index 000000000..3a98079e6
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.stories.tsx
@@ -0,0 +1,176 @@
+import { select, withKnobs } from "@storybook/addon-knobs";
+
+import React, { useRef, useState } from "react";
+import { Pressable, View } from "react-native";
+import Hoverable from "./Hoverable";
+import Tooltip from "./Tooltip";
+
+export default {
+  title: "Tooltip",
+  component: Tooltip,
+  decorators: [withKnobs],
+};
+
+export function Text() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <View
+        ref={ref}
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "200px",
+          height: "100px",
+          padding: 20,
+          margin: 100,
+        }}
+      >
+        <Tooltip
+          show={isHovered}
+          placement={select(
+            "direction",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+            ],
+            "top",
+          )}
+          anchorRef={ref}
+        >
+          Tooltip text
+        </Tooltip>
+        <div>Some Text That Is Important</div>
+      </View>
+    </Hoverable>
+  );
+}
+
+export function Children() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <View
+        ref={ref}
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "200px",
+          height: "100px",
+          padding: 20,
+          margin: 100,
+        }}
+      >
+        <Tooltip
+          show={isHovered}
+          placement={select(
+            "placement",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+            ],
+            "top",
+          )}
+          anchorRef={ref}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              width: "100%",
+              height: "100%",
+              alignItems: "center",
+              justifyContent: "space-around",
+            }}
+          >
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: "red",
+                backgroundColor: "red",
+              }}
+            >
+              <p>L</p>
+            </View>
+            <View
+              style={{
+                borderWidth: 1,
+                borderColor: "blue",
+                backgroundColor: "blue",
+              }}
+            >
+              <p>R</p>
+            </View>
+          </View>
+        </Tooltip>
+        <div>Some Text That Is Important</div>
+      </View>
+    </Hoverable>
+  );
+}
+
+export function Button() {
+  const [isHovered, setHovered] = useState(false);
+  const ref = useRef<View | null>(null);
+  return (
+    <Hoverable
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+    >
+      <Pressable
+        style={{
+          borderWidth: 1,
+          borderColor: "black",
+          width: "120px",
+          height: "50px",
+          margin: 150,
+        }}
+        ref={ref}
+      >
+        <p>A Pressable</p>
+        <Tooltip
+          show={isHovered}
+          placement={select(
+            "placement",
+            [
+              "top",
+              "right",
+              "bottom",
+              "left",
+              "overlay",
+              "inset-bottom-left",
+              "inset-bottom-right",
+              "inset-top-left",
+              "inset-top-right",
+            ],
+            "top",
+          )}
+          anchorRef={ref}
+        >
+          Tooltip text
+        </Tooltip>
+      </Pressable>
+    </Hoverable>
+  );
+}
diff --git a/packages/ui/src/components/Tooltip.tsx b/packages/ui/src/components/Tooltip.tsx
new file mode 100644
index 000000000..ade06a34d
--- /dev/null
+++ b/packages/ui/src/components/Tooltip.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+
+const TRIANGLE_SIZE = 16;
+const TRIANGLE_OFFSET = 15; // TODO: relate this to TRIANGLE_SIZE as styles change e.g TRIANGLE_SIZE - CONTAINER_BORDER
+
+const styles = StyleSheet.create({
+  triangle: {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    backgroundColor: "transparent",
+    borderStyle: "solid",
+    borderLeftWidth: TRIANGLE_SIZE / 2,
+    borderRightWidth: TRIANGLE_SIZE / 2,
+    borderBottomWidth: TRIANGLE_SIZE,
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent",
+    borderBottomColor: "white",
+  },
+  container: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    left: 0,
+    top: 0,
+  },
+  tooltip: {
+    padding: "10px",
+    backgroundColor: "black",
+    opacity: 0.5,
+    zIndex: 10000,
+  },
+});
+
+type TriangleProps = {
+  pointerColor?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  placement: TooltipPosition;
+  trianglePosition: { top?: number; left?: number };
+};
+
+const triangleAnglesByPlacement: { [key: string]: number } = {
+  bottom: 0,
+  left: 90,
+  top: 180,
+  right: 270,
+};
+
+const Triangle: React.FC<TriangleProps> = ({
+  style,
+  pointerColor,
+  placement,
+  trianglePosition,
+}) => (
+  <View
+    style={StyleSheet.flatten([
+      styles.triangle,
+      {
+        borderBottomColor: pointerColor,
+        transform: [{ rotate: `${triangleAnglesByPlacement[placement]}deg` }],
+        ...trianglePosition,
+      },
+      style,
+    ])}
+  />
+);
+
+export type TooltipPosition =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "overlay"
+  | "inset-bottom-left"
+  | "inset-bottom-right"
+  | "inset-top-left"
+  | "inset-top-right";
+
+export type TooltipProps = {
+  placement?: TooltipPosition;
+  show: boolean;
+  anchorRef: React.MutableRefObject<View | null>;
+  children: React.ReactNode;
+};
+
+const getPositions = ({
+  placement,
+  anchor,
+  tooltip,
+}: {
+  placement: string;
+  anchor: Size;
+  tooltip: Size;
+}): TooltipState => {
+  switch (placement) {
+    case "top":
+      return {
+        tooltipPosition: {
+          top: -tooltip.height - TRIANGLE_SIZE,
+          left: (anchor.width - tooltip.width) / 2,
+        },
+        trianglePosition: {
+          top: tooltip.height - 1,
+          left: (tooltip.width - TRIANGLE_OFFSET) / 2,
+        },
+      };
+    case "right":
+      return {
+        tooltipPosition: {
+          top: (anchor.height - tooltip.height) / 2,
+          left: anchor.width + TRIANGLE_OFFSET,
+        },
+        trianglePosition: {
+          top: (tooltip.height - TRIANGLE_OFFSET) / 2,
+          left: -TRIANGLE_OFFSET,
+        },
+      };
+    case "bottom":
+      return {
+        tooltipPosition: {
+          top: anchor.height + TRIANGLE_OFFSET,
+          left: (anchor.width - tooltip.width) / 2,
+        },
+        trianglePosition: {
+          top: -TRIANGLE_OFFSET,
+          left: (tooltip.width - TRIANGLE_OFFSET) / 2,
+        },
+      };
+    case "left":
+      return {
+        tooltipPosition: {
+          top: (anchor.height - tooltip.height) / 2,
+          left: -tooltip.width - TRIANGLE_SIZE,
+        },
+        trianglePosition: {
+          top: (tooltip.height - TRIANGLE_OFFSET) / 2,
+          left: tooltip.width - 1,
+        },
+      };
+    case "overlay":
+      return {
+        tooltipPosition: {
+          top: 0,
+          left: 0,
+          width: anchor.width,
+          height: anchor.height,
+        },
+        trianglePosition: {},
+      };
+    case "inset-bottom-left":
+      return {
+        tooltipPosition: { bottom: 0, left: 0 },
+        trianglePosition: {},
+      };
+    case "inset-top-left":
+      return {
+        tooltipPosition: { top: 0, left: 0 },
+        trianglePosition: {},
+      };
+    case "inset-top-right":
+      return {
+        tooltipPosition: { top: 0, right: 0 },
+        trianglePosition: {},
+      };
+    case "inset-bottom-right":
+      return {
+        tooltipPosition: { bottom: 0, right: 0 },
+        trianglePosition: {},
+      };
+    default:
+      return { tooltipPosition: {}, trianglePosition: {} };
+  }
+};
+
+type UIPosition = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+  width?: number;
+  height?: number;
+};
+
+type TooltipState = {
+  tooltipPosition: UIPosition;
+  trianglePosition: UIPosition;
+};
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+export default React.memo(function Tooltip(props: TooltipProps) {
+  const { placement = "top", show, anchorRef, children } = props;
+
+  const tooltipRef = useRef<View | null>(null);
+  const containerRef = useRef<View | null>(null);
+
+  const initState: TooltipState = {
+    tooltipPosition: {},
+    trianglePosition: {},
+  };
+  const [{ tooltipPosition, trianglePosition }, setPosition] =
+    useState(initState);
+
+  const [anchorMeasure, setAnchorMeasure] = useState<Size | null>(null);
+  useEffect(() => {
+    if (anchorRef.current) {
+      anchorRef.current.measure((x, y, width, height) => {
+        setAnchorMeasure({
+          width,
+          height,
+        });
+      });
+    }
+  }, [anchorRef]);
+
+  useEffect(() => {
+    if (anchorMeasure?.width && tooltipRef.current) {
+      tooltipRef.current.measure((x, y, width, height) => {
+        setPosition(
+          getPositions({
+            placement,
+            anchor: anchorMeasure,
+            tooltip: { width, height },
+          }),
+        );
+      });
+    }
+  }, [anchorMeasure, show, placement]);
+
+  // TODO: a "stay-on-screen" effect
+  // TODO: potentially use composition instead of anchorRef
+  // =====] how do you do this without affecting the child's original context?
+  // =====] e.g. for current Hoverable/Button implementation we require Pressable to receive mouse events
+
+  // embedded views to pick up the "cursor" event
+  return (
+    <View ref={containerRef} style={styles.container}>
+      <View
+        ref={tooltipRef}
+        style={StyleSheet.flatten([
+          !show && {
+            display: "none",
+          },
+          {
+            position:
+              placement.indexOf("inset") === 0 ? "absolute" : "relative",
+            width: placement === "overlay" ? "100%" : "fit-content",
+            height: placement === "overlay" ? "100%" : "fit-content",
+            ...tooltipPosition,
+          },
+          styles.tooltip,
+        ])}
+      >
+        {["top", "right", "bottom", "left"].includes(placement) && (
+          <Triangle placement={placement} trianglePosition={trianglePosition} />
+        )}
+        {typeof children === "string" ? (
+          <div style={{ color: "white" }}>{children}</div>
+        ) : (
+          children
+        )}
+      </View>
+    </View>
+  );
+});
diff --git a/packages/ui/src/components/__fixtures__/generateReviewItem.ts b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
index aabe33072..2975f16be 100644
--- a/packages/ui/src/components/__fixtures__/generateReviewItem.ts
+++ b/packages/ui/src/components/__fixtures__/generateReviewItem.ts
@@ -24,6 +24,17 @@ export function generateReviewItem(
     componentID: mainTaskComponentID,
     spec: {
       ...testQASpec,
+      content: {
+        ...testQASpec.content,
+        body: {
+          ...testQASpec.content.body,
+          text: questionText,
+        },
+        answer: {
+          ...testQASpec.content.answer,
+          text: answerText,
+        },
+      },
     },
   };
 }