Tooltips

When a chart has a tooltip

If a chart does not show all its numbers (when it gets too crowded), you need a tooltip. Hovering a row, or tapping it, then shows a tooltip with the name of the row and its values. With several value columns, each value has the name of its column and a key in its colour. A stack also shows its total.

A chart that shows all its numbers has no tooltip: it would only repeat the number you point at, and cover it. If the chart gets narrower and leaves numbers out, its tooltip comes on.

This chart has three lines close together, so it leaves numbers out. Point at it to try the tooltip.

<figure data-chart="line" data-chart-legend>
	<figcaption><b>Apples per tree</b></figcaption>
	<table>
		<thead>
			<tr><th>Year</th><th>North</th><th>South</th><th>East</th></tr>
		</thead>
		<tbody>
			<tr><th>2018</th><td>41</td><td>38</td><td>35</td></tr>
			<tr><th>2019</th><td>45</td><td>44</td><td>42</td></tr>
			<tr><th>2020</th><td>48</td><td>47</td><td>49</td></tr>
			<tr><th>2021</th><td>52</td><td>50</td><td>51</td></tr>
			<tr><th>2022</th><td>55</td><td>56</td><td>53</td></tr>
			<tr><th>2023</th><td>58</td><td>57</td><td>59</td></tr>
			<tr><th>2024</th><td>61</td><td>60</td><td>62</td></tr>
			<tr><th>2025</th><td>64</td><td>66</td><td>63</td></tr>
		</tbody>
	</table>
</figure>

How it works

• The tooltip uses the names and numbers of the chart, so it has the same number format and the same translations.
• It goes above the row, or below it if there is no room above. It stays inside the window.
• Pressing any key, tapping somewhere else, or moving the pointer away closes the tooltip.
• Only a mouse that moves opens a tooltip. If the page changes under a mouse that rests, for example when a key shows the next slide of a presentation or the page scrolls, no tooltip opens.
• The text has the size of the chart's text on the screen, also when the chart is scaled.
• On a chart with steps, a row that has not arrived yet has no tooltip.
• Screen readers do not read the tooltip. They read the table, which has the same values.

Always or never

Add data-chart-tooltip="true" to the figure to give a chart a tooltip all the time, also when it shows all its numbers. This chart shows all its numbers, and has a tooltip anyway.

<figure data-chart="column" data-chart-tooltip="true">
	<figcaption><b>Apples picked</b></figcaption>
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
			<tr><th>Winter</th><td>41</td></tr>
		</tbody>
	</table>
</figure>

data-chart-tooltip="false" turns it off. To set it for every chart, use the tooltip option: "auto" by default, true or false.

init({ tooltip: true });

Style it

The background, text, border, corners and shadow of the tooltip are CSS variables. See Styling tooltips, with examples.

Next

See Numbers for how numbers are shown, and CSS variables for all variables.