diff --git a/app/[username]/wrapped/sections/wrapped-runs-and-pbs.tsx b/app/[username]/wrapped/sections/wrapped-runs-and-pbs.tsx
index 2b3bd69d..96d1d5f8 100644
--- a/app/[username]/wrapped/sections/wrapped-runs-and-pbs.tsx
+++ b/app/[username]/wrapped/sections/wrapped-runs-and-pbs.tsx
@@ -13,6 +13,7 @@ import {
 import styles from "~src/components/css/LiveRun.module.scss";
 import { GameImage } from "~src/components/image/gameimage";
 import { TrophyIcon } from "~src/icons/trophy-icon";
+import { TruncatedTextTooltip } from "~src/components/tooltip";
 
 interface WrappedRunsAndPbsProps {
     wrapped: WrappedWithData;
@@ -252,28 +253,35 @@ const GameOverview: React.FC<
                                         </Col>
                                         <Col xs={9}>
                                             <div
-                                                className="text-start h5 fw-bold text-truncate pe-3"
+                                                className="text-start h5 fw-bold pe-3"
                                                 style={{
                                                     textDecoration: "underline",
                                                     textDecorationColor:
                                                         "var(--bs-secondary)",
                                                 }}
                                             >
-                                                {i < 3 && (
-                                                    <TrophyIcon
-                                                        size={24}
-                                                        trophyColor={
-                                                            i === 0
-                                                                ? "gold"
-                                                                : i === 1
-                                                                  ? "silver"
-                                                                  : "bronze"
-                                                        }
-                                                    />
-                                                )}
-                                                <span className="me-2">
-                                                    {key}
-                                                </span>
+                                                <TruncatedTextTooltip
+                                                    text={
+                                                        <>
+                                                            {i < 3 && (
+                                                                <TrophyIcon
+                                                                    size={24}
+                                                                    trophyColor={
+                                                                        i === 0
+                                                                            ? "gold"
+                                                                            : i ===
+                                                                                1
+                                                                              ? "silver"
+                                                                              : "bronze"
+                                                                    }
+                                                                />
+                                                            )}
+                                                            <span className="me-2">
+                                                                {key}
+                                                            </span>
+                                                        </>
+                                                    }
+                                                />
                                             </div>
                                             <div className="d-flex justify-content-between me-3">
                                                 <div>
@@ -459,25 +467,35 @@ const ShowGame: React.FC<
                                         setSelectedCategory(category);
                                     }}
                                 >
-                                    <div className="text-start px-3 h5 fw-bold text-truncate">
-                                        {category} -{" "}
-                                        <DurationToFormatted
-                                            duration={categoryData.pb}
-                                        />{" "}
-                                        {categoryData.timeBefore &&
-                                            categoryData.pb &&
-                                            categoryData.timeBefore !==
-                                                categoryData.pb && (
-                                                <span className="h6">
-                                                    (
-                                                    <Difference
-                                                        two={categoryData.timeBefore.toString()}
-                                                        one={categoryData.pb.toString()}
-                                                        inline={true}
+                                    <div className="text-start px-3 h5 fw-bold">
+                                        <TruncatedTextTooltip
+                                            text={
+                                                <>
+                                                    {category} -{" "}
+                                                    <DurationToFormatted
+                                                        duration={
+                                                            categoryData.pb
+                                                        }
                                                     />{" "}
-                                                    this year)
-                                                </span>
-                                            )}
+                                                    {categoryData.timeBefore &&
+                                                        categoryData.pb &&
+                                                        categoryData.timeBefore !==
+                                                            categoryData.pb && (
+                                                            <span className="h6">
+                                                                (
+                                                                <Difference
+                                                                    two={categoryData.timeBefore.toString()}
+                                                                    one={categoryData.pb.toString()}
+                                                                    inline={
+                                                                        true
+                                                                    }
+                                                                />{" "}
+                                                                this year)
+                                                            </span>
+                                                        )}
+                                                </>
+                                            }
+                                        />
                                     </div>
                                     <div className="d-flex justify-content-between px-3">
                                         <div>
diff --git a/app/[username]/wrapped/sections/wrapped-streak.tsx b/app/[username]/wrapped/sections/wrapped-streak.tsx
index 2bfe067e..02ece601 100644
--- a/app/[username]/wrapped/sections/wrapped-streak.tsx
+++ b/app/[username]/wrapped/sections/wrapped-streak.tsx
@@ -13,6 +13,7 @@ import {
 } from "~src/components/util/datetime";
 import { Col, Row, Table } from "react-bootstrap";
 import styles from "../hearts.module.scss";
+import { TruncatedTextTooltip } from "~src/components/tooltip";
 
 export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
     const streakInDays = wrapped.streak.length;
@@ -396,10 +397,14 @@ export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
                                     return (
                                         <tr key={run.endedAt}>
                                             <td>
-                                                <div className="h5 text-truncate">
-                                                    {getDateAsMonthDay(
-                                                        new Date(run.endedAt),
-                                                    )}
+                                                <div className="h5">
+                                                    <TruncatedTextTooltip
+                                                        text={getDateAsMonthDay(
+                                                            new Date(
+                                                                run.endedAt,
+                                                            ),
+                                                        )}
+                                                    />
                                                 </div>
                                             </td>
                                             <td
@@ -408,12 +413,14 @@ export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
                                                 }}
                                             >
                                                 <div
-                                                    className="h5 mb-1 mt-0 text-truncate"
+                                                    className="h5 mb-1 mt-0"
                                                     style={{
                                                         color: "var(--bs-link-color)",
                                                     }}
                                                 >
-                                                    {run.game}
+                                                    <TruncatedTextTooltip
+                                                        text={run.game}
+                                                    />
                                                 </div>
                                                 <div className="fst-italic">
                                                     {run.category}
@@ -447,8 +454,8 @@ const StreakStatItem = ({
 }) => {
     return (
         <tr>
-            <td className="h4 text-truncate">
-                <b>{stat}</b>
+            <td className="h4">
+                <TruncatedTextTooltip text={<b>{stat}</b>} />
             </td>
             <td className="align-bottom h6">{explanation}</td>
         </tr>
diff --git a/app/[username]/wrapped/sections/wrapped-top-games.tsx b/app/[username]/wrapped/sections/wrapped-top-games.tsx
index 002927f5..f4112af6 100644
--- a/app/[username]/wrapped/sections/wrapped-top-games.tsx
+++ b/app/[username]/wrapped/sections/wrapped-top-games.tsx
@@ -8,6 +8,7 @@ import { SectionWrapper } from "./section-wrapper";
 import { SectionBody } from "./section-body";
 import { SectionTitle } from "./section-title";
 import { TrophyIcon } from "~src/icons/trophy-icon";
+import { TruncatedTextTooltip } from "~src/components/tooltip";
 
 interface WrappedTopGamesProps {
     wrapped: WrappedWithData;
@@ -127,8 +128,10 @@ export const WrappedTopGames = memo<WrappedTopGamesProps>(({ wrapped }) => {
                                         autosize
                                     />
                                     <div className="card-footer fw-bold">
-                                        <h3 className="text-truncate">
-                                            {display}
+                                        <h3>
+                                            <TruncatedTextTooltip
+                                                text={display ?? ""}
+                                            />
                                         </h3>
                                     </div>
                                 </div>
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
index f094044c..0501b460 100644
--- a/src/components/tooltip.tsx
+++ b/src/components/tooltip.tsx
@@ -1,4 +1,5 @@
-import { OverlayTrigger, Popover } from "react-bootstrap";
+import { ReactNode, memo } from "react";
+import { OverlayTrigger, Popover, Tooltip } from "react-bootstrap";
 import { ReactElementLike } from "prop-types";
 
 export const InfoTooltip = ({
@@ -70,3 +71,30 @@ export const QuestionMark = () => {
         </svg>
     );
 };
+
+interface TruncatedTextTooltipProps {
+    text: ReactNode;
+    maxWidth?: number;
+}
+export const TruncatedTextTooltip = memo<TruncatedTextTooltipProps>(
+    ({ text, maxWidth }) => {
+        return (
+            <div
+                style={{
+                    maxWidth: maxWidth,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }}
+            >
+                <OverlayTrigger
+                    placement="top"
+                    overlay={<Tooltip id="tooltip">{text}</Tooltip>}
+                >
+                    <span>{text}</span>
+                </OverlayTrigger>
+            </div>
+        );
+    },
+);
+TruncatedTextTooltip.displayName = "TruncatedTextTooltip";