@marimo-team/islands 0.23.10-dev1 → 0.23.10-dev13

package/dist/main.js

@@ -21,18 +21,18 @@ import { a as __toCommonJS, n as __esmMin, r as __export, s as __toESM, t as __c
 import { _ as Logger, c as Objects, g as cn, h as Events, i as NOT_SET, l as useEventListener, m as useComposedRefs, n as buttonVariants, o as isPlatformMac, p as composeRefs, r as cva, t as Button, u as Slot, v as Functions, y as throwNotImplemented } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { n as Copy, r as toast, t as copyToClipboard } from "./copy-BuQpJEzp.js";
-import { $ as useCellActions, An as LoaderCircle, At as DeferredRequestRegistry, B as safeExtractSetUIElementMessageBuffers, Bn as Braces, Bt as getDataTypeColor, C as AccordionContent, Cn as Trigger2, Ct as customPythonLanguageSupport, Dn as PaintRoller, Dt as Paths, E as BorderAllIcon, En as Table2, Et as PathBuilder, F as base64ToDataView, Ft as jotaiJsonStorage, Gt as convertStatsName, H as getMarimoExportContext, In as Database, J as getCellNames, Jt as useRequestClient, K as createActions, Kt as getRequestClient, L as dataViewToBase64, Ln as Columns2, Mn as Info, Nn as FileText, Nt as repl, Pn as Eye, Q as reducer, Rt as PluralWords, S as Accordion, Sn as Root2$1, St as Checkbox, T as AccordionTrigger, Tn as Trash2, U as hasTrustedExportContext, V as renderHTML, Vt as require_client, W as hasRunAnyCellAtom, X as notebookOutline, Y as notebookAtom, Yt as isUninstantiated, Z as numColumnsAtom, _n as selectAtom, a as useCellFocusActions, an as parseInitialValue, bn as Content2, bt as isInternalCellName, ct as kioskModeAtom, dn as OBJECT_ID_ATTR, dt as outputIsLoading, en as NotebookScopedLocalStorage, et as useCellIds, f as isOutputEmpty, fn as RANDOM_ID_ATTR, ft as outputIsStale, gn as atomWithStorage, hn as atomWithReducer, i as LazyAnyLanguageCodeMirror, in as parseDataset, jn as Layers, jt as generateUUID, k as ChevronDownIcon, ln as UIElementId, mt as headingToIdentifier, n as Spinner, nt as createCell, o as useLastFocusedCellId, ot as getInitialAppMode, p as useExpandedConsoleOutput, pn as jsonParseWithSpecialChar, pt as isErrorMime, qt as requestClientAtom, rn as parseAttrValue, s as maybeAddAltairImport, sn as HTMLCellId, st as initialModeAtom, un as findCellId, w as AccordionItem, wt as MarkdownLanguageAdapter, xn as Item$1, xt as normalizeName, yt as getValidName, zn as CircleAlert, zt as DATA_TYPE_ICON, __tla as __tla_0 } from "./html-to-image-BHv7CEU_.js";
+import { n as Copy, r as toast, t as copyToClipboard } from "./copy-5jQ_kGE1.js";
+import { $ as useCellActions, An as LoaderCircle, At as DeferredRequestRegistry, B as safeExtractSetUIElementMessageBuffers, Bn as Braces, Bt as getDataTypeColor, C as AccordionContent, Cn as Trigger2, Ct as customPythonLanguageSupport, Dn as PaintRoller, Dt as Paths, E as BorderAllIcon, En as Table2, Et as PathBuilder, F as base64ToDataView, Ft as jotaiJsonStorage, Gt as convertStatsName, H as getMarimoExportContext, In as Database, J as getCellNames, Jt as useRequestClient, K as createActions, Kt as getRequestClient, L as dataViewToBase64, Ln as Columns2, Mn as Info, Nn as FileText, Nt as repl, Pn as Eye, Q as reducer, Rt as PluralWords, S as Accordion, Sn as Root2$1, St as Checkbox, T as AccordionTrigger, Tn as Trash2, U as hasTrustedExportContext, V as renderHTML, Vt as require_client, W as hasRunAnyCellAtom, X as notebookOutline, Y as notebookAtom, Yt as isUninstantiated, Z as numColumnsAtom, _n as selectAtom, a as useCellFocusActions, an as parseInitialValue, bn as Content2, bt as isInternalCellName, ct as kioskModeAtom, dn as OBJECT_ID_ATTR, dt as outputIsLoading, en as NotebookScopedLocalStorage, et as useCellIds, f as isOutputEmpty, fn as RANDOM_ID_ATTR, ft as outputIsStale, gn as atomWithStorage, hn as atomWithReducer, i as LazyAnyLanguageCodeMirror, in as parseDataset, jn as Layers, jt as generateUUID, k as ChevronDownIcon, ln as UIElementId, mt as headingToIdentifier, n as Spinner, nt as createCell, o as useLastFocusedCellId, ot as getInitialAppMode, p as useExpandedConsoleOutput, pn as jsonParseWithSpecialChar, pt as isErrorMime, qt as requestClientAtom, rn as parseAttrValue, s as maybeAddAltairImport, sn as HTMLCellId, st as initialModeAtom, un as findCellId, w as AccordionItem, wt as MarkdownLanguageAdapter, xn as Item$1, xt as normalizeName, yt as getValidName, zn as CircleAlert, zt as DATA_TYPE_ICON, __tla as __tla_0 } from "./html-to-image-DU8Qw0nX.js";
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { o as useSize, s as Root$2, u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-B96zNUEA.js";
-import { $ as TableBody, $t as ChevronLeft, A as ComboboxItem, At as ChartErrorState, B as contextAwarePanelOpen, Bt as $fae977aafc393c5c$export$6b862160d295c8e, C as prettifyRowColumnCount, Ct as dateToLocalISODate, D as DatePicker, Dt as TabsContent, E as useInternalStateWithSync, Et as Tabs, F as CommandList, Ft as RenderTextWithLinks, G as slotsController, H as contextAwarePanelType, Ht as GripHorizontal, I as CommandSeparator, It as Kbd, Jt as Code, K as Toggle, Kt as Ellipsis, L as smartMatch, Lt as HtmlOutput, M as CommandEmpty, Mt as ChartLoadingState, N as CommandInput, Nt as LazyVegaEmbed, O as DateRangePicker, Ot as TabsList, P as CommandItem, Pt as useOverflowDetection, Q as Table, Qt as ChevronsDownUp, R as ContextAwarePanelItem, Rt as EmotionCacheProvider, S as downloadSizeLimitAtom, St as Maps, T as getColumnCountForDisplay, Tt as dateToLocalISOTime, U as isCellAwareAtom, Ut as Funnel, V as contextAwarePanelOwner, Vt as TextWrap, W as SlotNames, Wt as EyeOff, X as Fill, Xt as ChevronsRight, Yt as ChevronsUpDown, Z as Provider$1, Zt as ChevronsLeft, _ as downloadBlob, _t as SELECT_COLUMN_ID, at as generateColumns, b as Progress, bt as getMimeValues, c as Slide, ct as ColumnChartContext, d as JsonOutput, dt as useIntersectionObserver, en as ArrowDownWideNarrow, et as TableCell, f as OutputArea, ft as usePrevious$1, g as ADD_PRINTING_CLASS, gt as INDEX_COLUMN_NAME, h as InstallPackageButton, ht as loadTableData, it as NAMELESS_COLUMN_PREFIX, j as Command, jt as ChartInfoState, k as Combobox, kt as TabsTrigger, l as RadioGroup, lt as ColumnChartSpecModel, m as DataTable, mt as loadTableAndRawData, n as marimoVersionAtom, nt as TableHeader, o as SLIDE_TYPE_OPTIONS_BY_VALUE, ot as inferFieldTypes, p as OutputRenderer, pt as getPageIndexForRow, qt as Download, r as showCodeInRunModeAtom, rt as TableRow, st as renderCellValue, t as useNotebookCodeAvailable, tt as TableHead, u as RadioGroupItem, ut as DelayMount, v as downloadByURL, vt as TOO_MANY_ROWS, w as prettifyRowCount, wt as dateToLocalISODateTime, x as Filenames, xt as isNullishFilter, y as downloadHTMLAsImage, yt as toFieldTypes, z as PANEL_TYPES, zt as $fae977aafc393c5c$export$588937bcd60ade55, __tla as __tla_2 } from "./code-visibility-B3oOX_TK.js";
+import { $ as TableBody, $t as ChevronLeft, A as ComboboxItem, At as ChartErrorState, B as contextAwarePanelOpen, Bt as $fae977aafc393c5c$export$6b862160d295c8e, C as prettifyRowColumnCount, Ct as dateToLocalISODate, D as DatePicker, Dt as TabsContent, E as useInternalStateWithSync, Et as Tabs, F as CommandList, Ft as RenderTextWithLinks, G as slotsController, H as contextAwarePanelType, Ht as GripHorizontal, I as CommandSeparator, It as Kbd, Jt as Code, K as Toggle, Kt as Ellipsis, L as smartMatch, Lt as HtmlOutput, M as CommandEmpty, Mt as ChartLoadingState, N as CommandInput, Nt as LazyVegaEmbed, O as DateRangePicker, Ot as TabsList, P as CommandItem, Pt as useOverflowDetection, Q as Table, Qt as ChevronsDownUp, R as ContextAwarePanelItem, Rt as EmotionCacheProvider, S as downloadSizeLimitAtom, St as Maps, T as getColumnCountForDisplay, Tt as dateToLocalISOTime, U as isCellAwareAtom, Ut as Funnel, V as contextAwarePanelOwner, Vt as TextWrap, W as SlotNames, Wt as EyeOff, X as Fill, Xt as ChevronsRight, Yt as ChevronsUpDown, Z as Provider$1, Zt as ChevronsLeft, _ as downloadBlob, _t as SELECT_COLUMN_ID, at as generateColumns, b as Progress, bt as getMimeValues, c as Slide, ct as ColumnChartContext, d as JsonOutput, dt as useIntersectionObserver, en as ArrowDownWideNarrow, et as TableCell, f as OutputArea, ft as usePrevious$1, g as ADD_PRINTING_CLASS, gt as INDEX_COLUMN_NAME, h as InstallPackageButton, ht as loadTableData, it as NAMELESS_COLUMN_PREFIX, j as Command, jt as ChartInfoState, k as Combobox, kt as TabsTrigger, l as RadioGroup, lt as ColumnChartSpecModel, m as DataTable, mt as loadTableAndRawData, n as marimoVersionAtom, nt as TableHeader, o as SLIDE_TYPE_OPTIONS_BY_VALUE, ot as inferFieldTypes, p as OutputRenderer, pt as getPageIndexForRow, qt as Download, r as showCodeInRunModeAtom, rt as TableRow, st as renderCellValue, t as useNotebookCodeAvailable, tt as TableHead, u as RadioGroupItem, ut as DelayMount, v as downloadByURL, vt as TOO_MANY_ROWS, w as prettifyRowCount, wt as dateToLocalISODateTime, x as Filenames, xt as isNullishFilter, y as downloadHTMLAsImage, yt as toFieldTypes, z as PANEL_TYPES, zt as $fae977aafc393c5c$export$588937bcd60ade55, __tla as __tla_2 } from "./code-visibility-Db0yh3sI.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-BBO9PIph.js";
 import { t as Check } from "./check-DTbrK0zt.js";
 import { A as Trigger$1, C as $a916eb452884faea$export$b7a616150fdb9f44, E as $18f2051aff69b9bf$export$a54013f0d02a8f82, F as X, L as ChevronDown, M as usePrevious$2, N as useDirection, P as createCollection, S as logNever, T as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as clamp$2, k as Icon, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, x as assertNever } from "./strings-Bu3vlb6W.js";
 import { I as $64fa3d84918910a7$export$29f1550f4b0d4415, K as useDebounceControlledState, L as $64fa3d84918910a7$export$4d86445c2cf5e3, Mt as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, Nt as $3ef42575df84b30b$export$9d1611c77c2fe928, V as $64fa3d84918910a7$export$df3a06d6289f983e, Vt as $ff5963eb1fccf552$export$e08e3b67e392101e, a as NumberField, b as DropdownMenuTrigger, c as prettyNumber, d as DropdownMenuContent, f as DropdownMenuGroup, fn as Circle, g as DropdownMenuSeparator, i as OnBlurredInput, it as $701a24aa0da5b062$export$ea18c227d4417cc3, l as prettyScientificNumber, m as DropdownMenuLabel, n as DebouncedNumberInput, p as DropdownMenuItem, pn as ChevronRight, q as useDebouncedCallback, r as Input, rt as $f7dceffc5ad7768b$export$4e328f61c538687f, t as DebouncedInput, u as DropdownMenu, ut as $6179b936705e76d3$export$ae780daf29e6d456, vt as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./input-_2sjvfne.js";
 import { _ as isWasm, c as asRemoteURL, d as isStaticNotebook, f as appendQueryParams, g as Deferred, m as require_cuid2, u as getStaticVirtualFiles, v as CircleQuestionMark } from "./toDate-x-WRDCH7.js";
-import { a as MarimoIncomingMessageEvent, c as MarimoValueUpdateEvent, d as Square, f as File, i as PythonIcon, l as createInputEvent, n as blobToString, o as MarimoValueInputEvent, r as filesToBase64, s as MarimoValueReadyEvent, t as processOutput, u as deserializeBlob } from "./process-output-BvySRgli.js";
+import { a as MarimoIncomingMessageEvent, c as MarimoValueUpdateEvent, d as Square, f as File, i as PythonIcon, l as createInputEvent, n as blobToString, o as MarimoValueInputEvent, r as filesToBase64, s as MarimoValueReadyEvent, t as processOutput, u as deserializeBlob } from "./process-output-Bxz3AalF.js";
 import { n as Trash, r as Pencil, t as BulkEdit } from "./types-CVvp1fKr.js";
 import { n as require_prop_types, r as Plus, t as ErrorBoundary } from "./ErrorBoundary-rULOrC_p.js";
 import { t as require_react_dom } from "./react-dom-BTJzcVJ9.js";
@@ -41,7 +41,7 @@ import { $ as StyleNamespace, A as looseObject, B as union, C as any, F as optio
 import { i as prettyError, n as ErrorBanner, r as CellNotInitializedError, t as Banner } from "./error-banner-5bz0L9hS.js";
 import { t as Label } from "./label-LWtdw5i8.js";
 import { a as TooltipRoot, i as TooltipProvider, n as TooltipContent, o as TooltipTrigger, r as TooltipPortal, t as Tooltip } from "./tooltip-C5FYOpQc.js";
-import { f as CopyClipboardIcon } from "./extends-BgdxCfYu.js";
+import { f as CopyClipboardIcon } from "./extends-CkydH1Q5.js";
 import { a as get_default } from "./hasIn-Deg7jl_j.js";
 import { n as _baseSet_default, t as pick_default } from "./pick-D1Qo8s2C.js";
 import { i as debounce_default, r as KnownQueryParams, t as CSSClasses } from "./constants-T20xxyNf.js";
@@ -57,7 +57,7 @@ import "./dist-CcXxepx6.js";
 import "./dist-DxvORzUR.js";
 import "./dist-DqAWR3CS.js";
 import { r as python } from "./dist-BotSqB48.js";
-import { n as minimalSetup, t as esm_default } from "./esm-BfhQmZjp.js";
+import { n as minimalSetup, t as esm_default } from "./esm-CCuYCd3R.js";
 import "./purify.es-H92eMd9-.js";
 import { i as AlertTitle, n as Alert, r as AlertDescription } from "./formats-DHxc-FdY.js";
 import "./vega-loader.browser-CZ-J8Py3.js";
@@ -5590,7 +5590,7 @@ let __tla = Promise.all([
       };
     }
   };
-  var LazyChatbot = import_react.lazy(() => import("./chat-ui-ChD4VvCo.js").then((e) => ({
+  var LazyChatbot = import_react.lazy(() => import("./chat-ui-BD7DNRSw.js").then((e) => ({
     default: e.Chatbot
   }))), messageSchema = array(object({
     id: string(),
@@ -5739,7 +5739,7 @@ let __tla = Promise.all([
     "time",
     "unknown"
   ];
-  var import_compiler_runtime$78 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-BOmK9ETQ.js").then(async (m) => {
+  var import_compiler_runtime$78 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-CgIxTzAP.js").then(async (m) => {
     await m.__tla;
     return m;
   }));
@@ -26689,7 +26689,7 @@ ${c}
       l(true);
       try {
         let c3 = await r({});
-        downloadByURL(c3.data, c3.filename ?? e.filename ?? void 0);
+        downloadByURL(c3.data || e.data, c3.filename ?? e.filename ?? void 0);
       } catch (e2) {
         toast({
           title: "Failed to download",
@@ -36116,7 +36116,7 @@ ${c}
     if (l && l !== "slide") return l;
     if (c == null ? void 0 : c.has(e)) return "skip";
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-Dj4x14QX.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CrJz4IhC.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a3;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{process-output-BvySRgli.js → process-output-Bxz3AalF.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-BHv7CEU_.js";
+import { it as parseHtmlContent, rt as ansiToPlainText } from "./html-to-image-DU8Qw0nX.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
 import { t as Strings } from "./strings-Bu3vlb6W.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";

package/dist/{reveal-component-Dj4x14QX.js → reveal-component-CrJz4IhC.js}

@@ -6,10 +6,10 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { _ as Logger, g as cn, h as Events, l as useEventListener, t as Button } from "./button-C5K9fIPF.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { ct as kioskModeAtom } from "./html-to-image-BHv7CEU_.js";
+import { ct as kioskModeAtom } from "./html-to-image-DU8Qw0nX.js";
 import "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { Gt as Expand, J as PanelGroup, Jt as Code, Wt as EyeOff, Y as PanelResizeHandle, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, q as Panel, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-B3oOX_TK.js";
+import { Gt as Expand, J as PanelGroup, Jt as Code, Wt as EyeOff, Y as PanelResizeHandle, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, q as Panel, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-Db0yh3sI.js";
 import { q as useDebouncedCallback } from "./input-_2sjvfne.js";
 import "./toDate-x-WRDCH7.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev1",
+  "version": "0.23.10-dev13",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -57,7 +57,7 @@
     "@marimo-team/codemirror-ai": "^0.3.7",
     "@marimo-team/codemirror-languageserver": "^1.16.12",
     "@marimo-team/codemirror-mcp": "^0.1.5",
-    "@marimo-team/codemirror-sql": "^0.2.4",
+    "@marimo-team/codemirror-sql": "^0.2.8",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -5,8 +5,8 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { fireEvent, render, screen, within } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
 
@@ -16,6 +16,12 @@ interface TestData {
 }
 
 describe("DataTable", () => {
+  // Restore real timers unconditionally so a failed assertion in a
+  // fake-timer test can't leak fake timers into later tests.
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("should maintain selection state when remounted", () => {
     const mockOnRowSelectionChange = vi.fn();
     const testData: TestData[] = [
@@ -63,17 +69,15 @@ describe("DataTable", () => {
     expect(commonProps.rowSelection).toEqual(initialRowSelection);
   });
 
-  it("applies hoverTemplate to the row title using row values", () => {
+  it("shows the hoverTemplate text as a styled tooltip on hover", async () => {
+    vi.useFakeTimers();
     interface RowData {
       id: number;
       first: string;
       last: string;
     }
 
-    const testData: RowData[] = [
-      { id: 1, first: "Michael", last: "Scott" },
-      { id: 2, first: "Jim", last: "Halpert" },
-    ];
+    const testData: RowData[] = [{ id: 1, first: "Michael", last: "Scott" }];
 
     const columns: ColumnDef<RowData>[] = [
       { accessorKey: "first", header: "First" },
@@ -86,7 +90,7 @@ describe("DataTable", () => {
           data={testData}
           columns={columns}
           selection={null}
-          totalRows={2}
+          totalRows={1}
           totalColumns={2}
           pagination={false}
           hoverTemplate={"{{first}} {{last}}"}
@@ -94,11 +98,149 @@ describe("DataTable", () => {
       </TooltipProvider>,
     );
 
-    // Grab all rows and assert title attribute computed from template
     const rows = screen.getAllByRole("row");
-    // The first row is header; subsequent rows correspond to data
-    expect(rows[1]).toHaveAttribute("title", "Michael Scott");
-    expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
+    // Native title is gone; hover text now comes from the styled tooltip.
+    expect(rows[1]).not.toHaveAttribute("title");
+
+    const cell = within(rows[1]).getAllByRole("cell")[0];
+    fireEvent.mouseOver(cell, { buttons: 0 });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    // Radix renders the content twice (visible + a11y-hidden), so match all.
+    expect(screen.getAllByText("Michael Scott").length).toBeGreaterThan(0);
+  });
+
+  it("shows per-cell hover text from cellHoverTexts on hover", () => {
+    vi.useFakeTimers();
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "per-cell tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    fireEvent.mouseOver(cell, { buttons: 0 });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(screen.getAllByText("per-cell tip").length).toBeGreaterThan(0);
+  });
+
+  it("links the focused cell to the tooltip content for assistive tech", () => {
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "focus tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    fireEvent.focus(cell);
+
+    const describedBy = cell.getAttribute("aria-describedby");
+    expect(describedBy).toBeTruthy();
+    expect(document.getElementById(describedBy as string)).toHaveTextContent(
+      "focus tip",
+    );
+
+    fireEvent.blur(cell);
+    expect(cell).not.toHaveAttribute("aria-describedby");
+  });
+
+  it("does not show a tooltip on pointer-induced focus", () => {
+    const testData: TestData[] = [{ id: 1, name: "Test 1" }];
+    const columns: ColumnDef<TestData>[] = [
+      { id: "name", accessorKey: "name", header: "Name" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          cellHoverTexts={{ "0": { name: "click tip" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cell = within(screen.getAllByRole("row")[1]).getByRole("cell");
+    // A click focuses the cell; the resulting focus must not show a tooltip.
+    fireEvent.mouseDown(cell);
+    fireEvent.focus(cell);
+
+    expect(cell).not.toHaveAttribute("aria-describedby");
+    expect(screen.queryByText("click tip")).toBeNull();
+  });
+
+  it("does not let a pending hover timer overwrite a focus tooltip", () => {
+    vi.useFakeTimers();
+    interface RowData {
+      id: number;
+      a: string;
+      b: string;
+    }
+    const testData: RowData[] = [{ id: 1, a: "a", b: "b" }];
+    const columns: ColumnDef<RowData>[] = [
+      { id: "a", accessorKey: "a", header: "A" },
+      { id: "b", accessorKey: "b", header: "B" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={2}
+          pagination={false}
+          cellHoverTexts={{ "0": { a: "hover A", b: "focus B" } }}
+        />
+      </TooltipProvider>,
+    );
+
+    const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+    // Start a pending hover-show on cell A, then focus cell B before it fires.
+    fireEvent.mouseOver(cells[0], { buttons: 0 });
+    fireEvent.focus(cells[1]);
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+
+    expect(screen.getAllByText("focus B").length).toBeGreaterThan(0);
+    expect(screen.queryByText("hover A")).toBeNull();
   });
 
   it("does not virtualize small datasets without pagination", () => {

package/src/components/data-table/hover-tooltip/__tests__/content.test.ts

@@ -0,0 +1,60 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell } from "@tanstack/react-table";
+import { describe, expect, it } from "vitest";
+import { applyHoverTemplate, computeCellTooltipContent } from "../content";
+
+function fakeCell(columnId: string, value: unknown, hoverTitle?: string) {
+  return {
+    column: { id: columnId },
+    getValue: () => value,
+    getHoverTitle: () => hoverTitle,
+  } as unknown as Cell<unknown, unknown>;
+}
+
+describe("applyHoverTemplate", () => {
+  it("substitutes column placeholders", () => {
+    const cells = [fakeCell("first", "Michael"), fakeCell("last", "Scott")];
+    expect(applyHoverTemplate("{{first}} {{last}}", cells)).toBe(
+      "Michael Scott",
+    );
+  });
+
+  it("renders nulls as empty strings", () => {
+    const cells = [fakeCell("a", null)];
+    expect(applyHoverTemplate("[{{a}}]", cells)).toBe("[]");
+  });
+
+  it("leaves unknown placeholders intact", () => {
+    expect(applyHoverTemplate("{{missing}}", [fakeCell("a", 1)])).toBe(
+      "{{missing}}",
+    );
+  });
+});
+
+describe("computeCellTooltipContent", () => {
+  it("prefers cell-level hover title", () => {
+    const cell = fakeCell("a", 1, "cell text");
+    expect(computeCellTooltipContent(cell, "{{a}}")).toBe("cell text");
+  });
+
+  it("falls back to row template when no cell title", () => {
+    const cell = {
+      column: { id: "first" },
+      getValue: () => "X",
+      getHoverTitle: () => undefined,
+      row: {
+        getVisibleCells: () => [
+          fakeCell("first", "Jim"),
+          fakeCell("last", "Halpert"),
+        ],
+      },
+    } as unknown as Cell<unknown, unknown>;
+    expect(computeCellTooltipContent(cell, "{{first}} {{last}}")).toBe(
+      "Jim Halpert",
+    );
+  });
+
+  it("returns undefined with no title and no template", () => {
+    expect(computeCellTooltipContent(fakeCell("a", 1), null)).toBeUndefined();
+  });
+});

package/src/components/data-table/hover-tooltip/content.ts

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell, RowData } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import { stringifyUnknownValue } from "../utils";
+
+export function applyHoverTemplate<TData extends RowData>(
+  template: string,
+  cells: Cell<TData, unknown>[],
+): string {
+  const variableRegex = /{{(\w+)}}/g;
+  const idToValue = new Map<string, string>();
+  for (const c of cells) {
+    const s = stringifyUnknownValue({
+      value: c.getValue(),
+      nullAsEmptyString: true,
+    });
+    idToValue.set(c.column.id, s);
+  }
+  return template.replaceAll(variableRegex, (_substr, varName: string) => {
+    const val = idToValue.get(varName);
+    return val === undefined ? `{{${varName}}}` : val;
+  });
+}
+
+/**
+ * Resolve the tooltip content for a hovered cell.
+ *
+ * Cell-level (callable `hover_template`) takes precedence; otherwise the
+ * row-level string template is rendered against the row's visible cells.
+ * Returns `undefined` when there is nothing to show.
+ */
+export function computeCellTooltipContent<TData extends RowData>(
+  cell: Cell<TData, unknown>,
+  hoverTemplate: string | null,
+): ReactNode {
+  const cellTitle = cell.getHoverTitle?.();
+  if (cellTitle != null && cellTitle !== "") {
+    return cellTitle;
+  }
+  if (hoverTemplate) {
+    return applyHoverTemplate(hoverTemplate, cell.row.getVisibleCells());
+  }
+  return undefined;
+}

package/src/components/data-table/hover-tooltip/hover-tooltip.tsx

@@ -0,0 +1,55 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import {
+  TooltipContent,
+  TooltipPortal,
+  TooltipRoot,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { HoverTooltipState } from "./use-table-hover-tooltip";
+
+interface HoverTooltipProps {
+  state: HoverTooltipState | null;
+  contentId: string;
+  onClose: () => void;
+}
+
+/**
+ * A single radix tooltip whose anchor is repositioned to the hovered cell.
+ * Rendering one instance per table (instead of one per cell) keeps the cost
+ * constant regardless of how many cells are on screen.
+ */
+export const HoverTooltip = ({
+  state,
+  contentId,
+  onClose,
+}: HoverTooltipProps) => {
+  return (
+    <TooltipRoot
+      open={state != null}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+      delayDuration={0}
+      disableHoverableContent={true}
+    >
+      <TooltipTrigger asChild={true}>
+        <div
+          aria-hidden={true}
+          style={{
+            position: "fixed",
+            top: state?.rect.top ?? 0,
+            left: state?.rect.left ?? 0,
+            width: state?.rect.width ?? 0,
+            height: state?.rect.height ?? 0,
+            pointerEvents: "none",
+          }}
+        />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent id={contentId}>{state?.content}</TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  );
+};

package/src/components/data-table/hover-tooltip/use-table-hover-tooltip.ts

@@ -0,0 +1,159 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell, RowData, Table } from "@tanstack/react-table";
+import {
+  type ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import useEvent from "react-use-event-hook";
+import { computeCellTooltipContent } from "./content";
+
+// Matches the default TooltipProvider delay (MarimoApp.tsx) for visual parity
+// with the rest of the app's tooltips.
+const TOOLTIP_DELAY_MS = 400;
+
+export interface HoverTooltipState {
+  rect: { top: number; left: number; width: number; height: number };
+  content: ReactNode;
+}
+
+export function useTableHoverTooltip<TData extends RowData>({
+  table,
+}: {
+  table: Table<TData>;
+}) {
+  const hoverTemplate = table.getState().cellHoverTemplate || null;
+  const [tooltipState, setTooltipState] = useState<HoverTooltipState | null>(
+    null,
+  );
+  const timer = useRef<number | null>(null);
+
+  // Stable id linking the focused/hovered cell to the tooltip content for
+  // assistive tech (the radix trigger is an aria-hidden phantom anchor).
+  const tooltipContentId = useId();
+  const anchorCell = useRef<HTMLElement | null>(null);
+  // Focus fires for pointer interactions too; track pointer state so
+  // click/drag-select focus doesn't show a tooltip (keyboard focus still does).
+  const pointerDown = useRef(false);
+
+  const clearTimer = () => {
+    if (timer.current != null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+
+  const hideTooltip = useEvent(() => {
+    clearTimer();
+    setTooltipState(null);
+  });
+
+  const showFor = (target: HTMLElement, content: ReactNode) => {
+    anchorCell.current = target;
+    const r = target.getBoundingClientRect();
+    setTooltipState({
+      rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+      content,
+    });
+  };
+
+  // Point the real cell at the tooltip content while it is shown. Done in a
+  // layout effect (after commit) so React's re-render from `setTooltipState`
+  // can't clobber an imperatively set attribute; cleanup unlinks the previous
+  // cell.
+  useLayoutEffect(() => {
+    if (!tooltipState) {
+      return;
+    }
+    const cell = anchorCell.current;
+    cell?.setAttribute("aria-describedby", tooltipContentId);
+    return () => cell?.removeAttribute("aria-describedby");
+  }, [tooltipState, tooltipContentId]);
+
+  useEffect(() => {
+    const onDown = () => {
+      pointerDown.current = true;
+    };
+    const onUp = () => {
+      pointerDown.current = false;
+    };
+    window.addEventListener("mousedown", onDown, { capture: true });
+    window.addEventListener("mouseup", onUp, { capture: true });
+    return () => {
+      window.removeEventListener("mousedown", onDown, { capture: true });
+      window.removeEventListener("mouseup", onUp, { capture: true });
+    };
+  }, []);
+
+  const handleCellMouseOver = useEvent(
+    (e: React.MouseEvent, cell: Cell<TData, unknown>) => {
+      // Suppress while a mouse button is held (range-select drag).
+      if (e.buttons !== 0) {
+        return;
+      }
+      const target = e.currentTarget as HTMLElement;
+      const content = computeCellTooltipContent(cell, hoverTemplate);
+      if (content == null || content === "") {
+        hideTooltip();
+        return;
+      }
+      clearTimer();
+      timer.current = window.setTimeout(
+        () => showFor(target, content),
+        TOOLTIP_DELAY_MS,
+      );
+    },
+  );
+
+  const handleCellMouseLeave = useEvent(() => hideTooltip());
+
+  // Keyboard parity: cells are tabIndex=0, native `title` showed on focus too.
+  const handleCellFocus = useEvent(
+    (e: React.FocusEvent, cell: Cell<TData, unknown>) => {
+      // Cancel any pending hover-show so a stale timer can't overwrite the
+      // focus-triggered tooltip after the delay.
+      clearTimer();
+      // Focus also fires for click/drag-select; only keyboard focus (no pointer
+      // held) should show the tooltip, mirroring the hover drag suppression.
+      if (pointerDown.current) {
+        return;
+      }
+      const content = computeCellTooltipContent(cell, hoverTemplate);
+      if (content == null || content === "") {
+        return;
+      }
+      showFor(e.currentTarget as HTMLElement, content);
+    },
+  );
+
+  const handleCellBlur = useEvent(() => hideTooltip());
+
+  // The anchor rect is captured at hover time, so any scroll or resize leaves
+  // it stale; hide instead of tracking. Capture catches scrolls inside the
+  // table's own container too (scroll events don't bubble but do fire in
+  // capture).
+  useEffect(() => {
+    const opts = { passive: true, capture: true } as const;
+    window.addEventListener("scroll", hideTooltip, opts);
+    window.addEventListener("resize", hideTooltip);
+    return () => {
+      window.removeEventListener("scroll", hideTooltip, { capture: true });
+      window.removeEventListener("resize", hideTooltip);
+    };
+  }, [hideTooltip]);
+
+  useEffect(() => clearTimer, []);
+
+  return {
+    tooltipState,
+    tooltipContentId,
+    hideTooltip,
+    handleCellMouseOver,
+    handleCellMouseLeave,
+    handleCellFocus,
+    handleCellBlur,
+  };
+}