update uptime page

src/App.jsx

@@ -2575,6 +2575,7 @@ function LocationSignalMap({ countries, locations }) {
 }
 
 function UptimePage({ uptime }) {
+  const [hoveredSnapshot, setHoveredSnapshot] = useState(null)
   const checks = uptime.checks
   const history = uptime.history
   const operationalCount = checks.filter((check) => check.ok).length
@@ -2622,21 +2623,41 @@ function UptimePage({ uptime }) {
           </p>
         </div>
 
-        <div className="mt-5 flex h-28 items-end gap-1 rounded-md border border-border bg-bg p-3">
+        <div className="relative mt-5 flex h-28 items-end gap-1 rounded-md border border-border bg-bg p-3">
-          {history.map((sample) => {
+          {history.map((sample, index) => {
             const height = `${Math.max(12, (sample.onlineChecks / sample.totalChecks) * 100)}%`
+            const left = history.length > 1 ? (index / (history.length - 1)) * 100 : 50
 
             return (
               <div
                 aria-label={`${sample.ok ? 'Uptime' : 'Downtime'} at ${dateFormat.format(new Date(sample.timestamp))}`}
                 className={`min-w-2 flex-1 rounded-sm ${sample.ok ? 'bg-success' : 'bg-danger'}`}
                 key={sample.timestamp}
+                onBlur={() => setHoveredSnapshot(null)}
+                onFocus={() => setHoveredSnapshot({ ...sample, left })}
+                onMouseEnter={() => setHoveredSnapshot({ ...sample, left })}
+                onMouseLeave={() => setHoveredSnapshot(null)}
                 style={{ height }}
-                title={`${sample.onlineChecks}/${sample.totalChecks} online`}
+                tabIndex="0"
               />
             )
           })}
 
+          {hoveredSnapshot ? (
+            <div
+              className="pointer-events-none absolute bottom-full z-20 mb-2 w-max max-w-64 rounded-md bg-text px-2 py-1 text-xs font-semibold text-bg shadow-lg"
+              style={{
+                left: `${hoveredSnapshot.left}%`,
+                transform: 'translateX(-50%)',
+              }}
+            >
+              {dateFormat.format(new Date(hoveredSnapshot.timestamp))}
+              <span className="block font-normal text-bg/80">
+                {hoveredSnapshot.ok ? 'Uptime' : 'Downtime or degraded'} · {formatNumber(hoveredSnapshot.onlineChecks)}/{formatNumber(hoveredSnapshot.totalChecks)} online
+              </span>
+            </div>
+          ) : null}
+
           {!history.length ? (
             <div className="flex h-full w-full items-center justify-center text-sm text-text-soft">
               Checking website status