From 43ba928c1fc7a9ed03868cd6e1cdcf019a9279e3 Mon Sep 17 00:00:00 2001
From: 81reap <prayag.bhakar@gmail.com>
Date: Sun, 23 Aug 2026 17:03:00 -0400
Subject: [PATCH] fix(chart) :: change tootltip title colour to be visible

---
 CHANGELOG.md                             |  1 +
 sqlpage/sqlpage.css                      |  4 ++++
 tests/end-to-end/chart-component.spec.ts | 16 ++++++++++++++++
 3 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 555cee9a..32986096 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@
  - List-valued configuration options, including OIDC paths and trusted audiences, can now be set through environment variables as space-separated lists.
  - `sqlpage.fetch_with_meta` now correctly documents server JSON responses sent under `json_body`, not `body`.
  - Datagrid rows with an icon or image no longer display an unnecessary en-dash placeholder, and an explicitly empty description remains empty.
+ - Tooltip title text is now inhertis the same colour as the tooltip text.
  - Charts can display reference lines. A row with a `yline` is drawn as a line across the chart at that value of the y axis, with the row's `label` and `color` for its text and its color. Reference lines are rows, so a chart can have as many of them as the query returns. A line follows its axis, so on a `horizontal` bar chart a `yline` is drawn down the chart rather than across it. They are not added to the total of a `stacked` chart, and are not filled in an `area` chart.
 
 ## v0.45
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index a6e0b769..f803bee2 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -60,6 +60,10 @@ code {
   font-weight: var(--tblr-body-font-weight);
 }
 
+.apexcharts-tooltip .apexcharts-tooltip-title {
+  color: inherit;
+}
+
 /** table **/
 .table-freeze-headers thead {
   position: sticky;
diff --git a/tests/end-to-end/chart-component.spec.ts b/tests/end-to-end/chart-component.spec.ts
index 3c32f101..f56a4490 100644
--- a/tests/end-to-end/chart-component.spec.ts
+++ b/tests/end-to-end/chart-component.spec.ts
@@ -363,3 +363,19 @@ test("draws a rangeBar chart that asks to be stacked", async ({ page }) => {
   expect(chart.shapes).toHaveLength(2);
   expect(chart.stacked).toBe(false);
 });
+
+test("gives the tooltip title the color of the tooltip around it", async ({
+  page,
+}) => {
+  await renderChart(page, { type: "line" }, A_DAY_OF_WORK);
+  await page.locator("#test-chart .apexcharts-inner").hover({ force: true });
+
+  const title = page.locator("#test-chart .apexcharts-tooltip-title");
+  await expect(title).toHaveText("Tue");
+  const colors = await title.evaluate((el) => ({
+    title: getComputedStyle(el).color,
+    tooltip: getComputedStyle(el.parentElement as HTMLElement).color,
+  }));
+
+  expect(colors.title).toBe(colors.tooltip);
+});