Charts.css

# Tooltips

Tooltips display additional information, using little popup boxes, when hovering over the data.

# Add Tooltips

Add tooltips to any data element by changing the HTML markup to include the tooltip content.

# Only Data

Simple data <table> with only the data:

<tr>
  <th scope="row"> Dataset label </th>
  <td> 10 </td>
  <td> 20 </td>
  <td> 30 </td>
</tr>
1
2
3
4
5
6

# Data With Tooltips

To add tooltips, simply add a <span> tag with a .tooltip class.





 


<tr>
  <th scope="row"> Dataset label </th>
  <td> 10 </td>
  <td> 20 </td>
  <td> 30 <span class="tooltip"> Data: 30 <br> More info... </span> </td>
</tr>
1
2
3
4
5
6

Add tooltips to specific data as in the example above, or to all your data elements as shown below.



 
 
 


<tr>
  <th scope="row"> Dataset label </th>
  <td> 10 <span class="tooltip"> Data: 10 <br> More info... </span> </td>
  <td> 20 <span class="tooltip"> Data: 20 <br> More info... </span> </td>
  <td> 30 <span class="tooltip"> Data: 30 <br> More info... </span> </td>
</tr>
1
2
3
4
5
6

You can even add links, images and other elements to your tooltips.

# Best Practice

It's not required, but we recommend wrapping your data with a <span> element and a .data class. This way you can distinguish between the raw data and the tooltip.




 
 


 
 


 
 



<tr>
  <th scope="row"> Dataset label </th>
  <td>
    <span class="data"> 10 </span>
    <span class="tooltip"> Data: 10 <br> More info... </span>
  </td>
  <td>
    <span class="data"> 20 </span>
    <span class="tooltip"> Data: 20 <br> More info... </span>
  </td>
  <td>
    <span class="data"> 30 </span>
    <span class="tooltip"> Data: 30 <br> More info... </span>
  </td>
</tr>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

This markup will help you target the data selector for other purposes like adding motion effects and animations.

# Example

A simple example of a column chart with tooltips:

Tooltips Example - 2016 Summer Olympics Medal Table
Country Gold Silver Bronze
USA 46
🥇 United States took
home 46 gold medals 		37
🥈 United States took
home 37 silver medals 		38
🥉 United States took
home 38 bronze medals
GBR 27 Great Britain took
home 27 gold medals 		23 Great Britain took
home 23 silver medals 		17 Great Britain took
home 17 bronze medals
CHN 26 China took home
26 gold medals 		18 China took home
18 silver medals 		26 China took home
26 bronze medals
Open in: 
#tooltips-example {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
#tooltips-example .column {
  --color-1: #FEE101;
  --color-2: #D7D7D7;
  --color-3: #A77044;
}
1
2
3
4
5
6
7
8
9
10
<div id="tooltips-example">

  <table class="charts-css column multiple show-heading show-labels show-primary-axis data-spacing-20">

    <caption> 2016 Summer Olympics Medal Table </caption>

    <thead>
      <tr>
        <th scope="col"> Country </th>
        <th scope="col"> Gold </th>
        <th scope="col"> Silver </th>
        <th scope="col"> Bronze </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row"> USA </th>
        <td style="--size: calc( 46 / 50 );">
          <span class="data"> 46 <br> 🥇 </span>
          <span class="tooltip"> United States took <br> home 46 gold medals </span>
        </td>
        <td style="--size: calc( 37 / 50 );">
          <span class="data"> 37 <br> 🥈 </span>
          <span class="tooltip"> United States took <br> home 37 silver medals </span>
        </td>
        <td style="--size: calc( 38 / 50 );">
          <span class="data"> 38 <br> 🥉 </span>
          <span class="tooltip"> United States took <br> home 38 bronze medals </span>
        </td>
      </tr>
      <tr>
        <th scope="row"> GBR </th>
        <td style="--size: calc( 27 / 50 );">
          <span class="data"> 27 </span>
          <span class="tooltip"> Great Britain took <br> home 27 gold medals </span>
        </td>
        <td style="--size: calc( 23 / 50 );">
          <span class="data"> 23 </span>
          <span class="tooltip"> Great Britain took <br> home 23 silver medals </span>
        </td>
        <td style="--size: calc( 17 / 50 );">
          <span class="data"> 17 </span>
          <span class="tooltip"> Great Britain took <br> home 17 bronze medals </span>
        </td>
      </tr>
      <tr>
        <th scope="row"> CHN </th>
        <td style="--size: calc( 26 / 50 );">
          <span class="data"> 26 </span>
          <span class="tooltip"> China took home <br> 26 gold medals </span>
        </td>
        <td style="--size: calc( 18 / 50 );">
          <span class="data"> 18 </span>
          <span class="tooltip"> China took home <br> 18 silver medals </span>
        </td>
        <td style="--size: calc( 26 / 50 );">
          <span class="data"> 26 </span>
          <span class="tooltip"> China took home <br> 26 bronze medals </span>
        </td>
      </tr>
    </tbody>

  </table>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

← Legend →