title: How to change tooltip content in c3js
body: <p>I'm working on a timeline display and I have data that I want to show on the tooltip. currently it only shows the value at each time. and I cannot find a way to change it. the example below shows how to change the value's format but not what values are displayed</p>
  
  <pre><code>var chart = c3.generate({
  data: {
      columns: [
          ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
          ['data2', 100, 200, 100, 40, 150, 250]
      ],
      axes: {
          data2: 'y2'
      }
  },
  axis : {
      y : {
          tick: {
              format: d3.format("s")
          }
      },
      y2: {
          show: true,
          tick: {
              format: d3.format("$")
          }
      }
  },
  tooltip: {
      format: {
          title: function (d) { return 'Data ' + d; },
          value: function (value, ratio, id) {
              var format = id === 'data1' ? d3.format(',') : d3.format('$');
              return format(value);
          }
             //value: d3.format(',') // apply this format to both y and y2
      }
  }
  });
  </code></pre>
  
  <p>it's taken from <a href="http://c3js.org/samples/tooltip_format.html" rel="noreferrer">http://c3js.org/samples/tooltip_format.html</a>
  they do admit that there isn't an example for content editing but I couldn't find anything in the reference or forums, but a suggestion to change the code (it's here: <a href="https://github.com/masayuki0812/c3/blob/master/c3.js" rel="noreferrer">https://github.com/masayuki0812/c3/blob/master/c3.js</a> in line 300) and below:</p>
  
  <pre><code>__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
          var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
              nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
              valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat,
              text, i, title, value, name, bgcolor;
          for (i = 0; i &lt; d.length; i++) {
              if (! (d[i] &amp;&amp; (d[i].value || d[i].value === 0))) { continue; }
  
              if (! text) {
                  title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                  text = "&lt;table class='" + CLASS.tooltip + "'&gt;" + (title || title === 0 ? "&lt;tr&gt;&lt;th colspan='2'&gt;" + title + "&lt;/th&gt;&lt;/tr&gt;" : "");
              }
  
              name = nameFormat(d[i].name);
              value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
              bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id);
  
              text += "&lt;tr class='" + CLASS.tooltipName + "-" + d[i].id + "'&gt;";
              text += "&lt;td class='name'&gt;&lt;span style='background-color:" + bgcolor + "'&gt;&lt;/span&gt;" + name + "&lt;/td&gt;";
              text += "&lt;td class='value'&gt;" + value + "&lt;/td&gt;";
              text += "&lt;/tr&gt;";
          }
          return text + "&lt;/table&gt;";
      })
  </code></pre>
  
  <p>did anyone attempted to do so? developed some function to facilitate the process? have any tips on how to do so correctly? I do not know how to change their code in a way I could use more data or data different than the d value the function gets.</p>