Tooltips

The background, text, border, corners and shadow of the tooltip.

Where to set the variables

The tooltip is not inside the chart in the page: there is one tooltip for the whole page, at the end of the page. So it reads the variables of the chart when it opens. Set them on the chart, on a class or on :root, as other variables. The font, the text size and the colour scheme come from the chart too.

The charts on this page show all their numbers, so they have data-chart-tooltip="true" to have a tooltip anyway. Point at them to see it. See Tooltips for what a tooltip shows.

The variables

Variable Sets
--tablechart-tooltip-surface The background: white by default, and in dark mode a little lighter than the chart's background
--tablechart-tooltip-color The text colour: the chart's text colour by default
--tablechart-tooltip-border The border: a thin line in the text colour by default
--tablechart-tooltip-radius The corners: 0.4em by default
--tablechart-tooltip-padding The space inside the tooltip: 0.45em 0.7em by default
--tablechart-tooltip-shadow The shadow under the tooltip, so it stands out from what is behind it

A dark tooltip

A dark tooltip stands out on a light page. The dots before the names keep the colours of the lines or columns, so check that they show on the dark background.

CSS 
.dark-tooltip {
	--tablechart-tooltip-surface: #16323f;
	--tablechart-tooltip-color: #f3efe9;
	--tablechart-tooltip-border: none;
	--tablechart-color-1: #7fb03f;
	--tablechart-color-2: #e0a458;
}
Year Farm shop Market
2023 64 38
2024 71 45
2025 69 57
HTML 
<figure class="dark-tooltip" data-chart="column" data-chart-tooltip="true">
	<table>
		<thead>
			<tr><th>Year</th><th>Farm shop</th><th>Market</th></tr>
		</thead>
		<tbody>
			<tr><th>2023</th><td>64</td><td>38</td></tr>
			<tr><th>2024</th><td>71</td><td>45</td></tr>
			<tr><th>2025</th><td>69</td><td>57</td></tr>
		</tbody>
	</table>
</figure>

A flat tooltip

Without a shadow, a border in the colour of the chart sets the tooltip apart. Square corners and more padding make it a small card.

CSS 
.flat-tooltip {
	--tablechart-tooltip-shadow: none;
	--tablechart-tooltip-border: 2px solid #2f6f7e;
	--tablechart-tooltip-radius: 0;
	--tablechart-tooltip-padding: 0.6em 0.9em;
}
Year North South
2016 41 30
2019 58 39
2022 77 52
2025 105 61
HTML 
<figure class="flat-tooltip" data-chart="line" data-chart-legend data-chart-tooltip="true">
	<table>
		<thead>
			<tr><th>Year</th><th>North</th><th data-line="dashed">South</th></tr>
		</thead>
		<tbody>
			<tr><th>2016</th><td>41</td><td>30</td></tr>
			<tr><th>2019</th><td>58</td><td>39</td></tr>
			<tr><th>2022</th><td>77</td><td>52</td></tr>
			<tr><th>2025</th><td>105</td><td>61</td></tr>
		</tbody>
	</table>
</figure>

Light and dark

The tooltip follows the colour scheme of the chart. To set a colour for each scheme, use light-dark() in a variable, as for the chart itself. See Light and dark.

CSS 
:root {
	--tablechart-tooltip-surface: light-dark(#ffffff, #16323f);
	--tablechart-tooltip-color: light-dark(#16323f, #f3efe9);
}

Next

See CSS variables for all variables.