fix(chart) :: change tootltip title colour to be visible

Author: 81reap

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

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;

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);
+});