diff --git a/web/src/components/TimelineEventOverlay.jsx b/web/src/components/TimelineEventOverlay.jsx
new file mode 100644
index 000000000..33c6b99bf
--- /dev/null
+++ b/web/src/components/TimelineEventOverlay.jsx
@@ -0,0 +1,65 @@
+import { Fragment, h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import Heading from './Heading';
+
+export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
+  const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
+  const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
+  const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
+  const boxBottomEdge = Math.round((1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100);
+
+  const [isHovering, setIsHovering] = useState(false);
+  const getHoverStyle = () => {
+    if (boxLeftEdge < 15) {
+      // show object stats on right side
+      return {
+        left: `${boxLeftEdge + eventOverlay.data.box[2] * 100 + 1}%`,
+        top: `${boxTopEdge}%`,
+      };
+    }
+
+    return {
+      right: `${boxRightEdge + eventOverlay.data.box[2] * 100 + 1}%`,
+      top: `${boxTopEdge}%`,
+    };
+  };
+
+  const getObjectArea = () => {
+    const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
+    const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
+    return Math.round(width * height);
+  };
+
+  const getObjectRatio = () => {
+    const width = eventOverlay.data.box[2];
+    const height = eventOverlay.data.box[3];
+    return Math.round(100 * width / height) / 100;
+  };
+
+  return (
+    <Fragment>
+      <div
+        className="absolute border-4 border-red-600"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        style={{
+          left: `${boxLeftEdge}%`,
+          top: `${boxTopEdge}%`,
+          right: `${boxRightEdge}%`,
+          bottom: `${boxBottomEdge}%`,
+        }}
+      >
+        {eventOverlay.class_type == 'entered_zone' ? (
+          <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
+        ) : null}
+      </div>
+      {isHovering && (
+        <div className="absolute bg-slate-800 p-4 block text-white text-lg" style={getHoverStyle()}>
+          <div className="font-bold text-xl">{event.label} attributes:</div>
+          <div>{`Object Area: ${getObjectArea()} px`}</div>
+          <div>{`Object Ratio: ${getObjectRatio()}`}</div>
+        </div>
+      )}
+    </Fragment>
+  );
+}
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 21b282a53..9742ed130 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -29,6 +29,7 @@ import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../uti
 import TimeAgo from '../components/TimeAgo';
 import Timepicker from '../components/TimePicker';
 import TimelineSummary from '../components/TimelineSummary';
+import TimelineEventOverlay from '../components/TimelineEventOverlay';
 
 const API_LIMIT = 25;
 
@@ -721,23 +722,11 @@ export default function Events({ path, ...props }) {
                                   }}
                                 >
                                   {eventOverlay ? (
-                                    <div
-                                      className="absolute border-4 border-red-600"
-                                      style={{
-                                        left: `${Math.round(eventOverlay.data.box[0] * 100)}%`,
-                                        top: `${Math.round(eventOverlay.data.box[1] * 100)}%`,
-                                        right: `${Math.round(
-                                          (1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100
-                                        )}%`,
-                                        bottom: `${Math.round(
-                                          (1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100
-                                        )}%`,
-                                      }}
-                                    >
-                                      {eventOverlay.class_type == 'entered_zone' ? (
-                                        <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
-                                      ) : null}
-                                    </div>
+                                    <TimelineEventOverlay
+                                      event={event}
+                                      eventOverlay={eventOverlay}
+                                      cameraConfig={config.cameras[event.camera]}
+                                    />
                                   ) : null}
                                 </VideoPlayer>
                               </div>