title: Chart.js - custom tooltip with multiple values
body: <p>I have a bar chart that I want to display a second label in the tooltip box that will be populated from my database. You can see from my code below that I have started to set it up so that multiple labels can be displayed in the tooltips (short,long) and also I want to be able to show multiple values coming from my database as labels.</p>
  
  <p>For example I have a bridge ID of 135554 (bridge_id_grab) and that bridge is 35 years old (bridge_age_grab) and is located at milepost 13.34 (bridge_mp_grab). </p>
  
  <p>So I want this to display in the tooltip as </p>
  
  <p>"Bridge ID: 135554,
  Bridge Age: 35,
  Milepost: 13.34"</p>
  
  <p>I think I am close - just can't figure out how to use  get just one value for bridge_mp_grab - it's showing as a string of all the values in the database.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>             function Label(short, long) {
                this.short = short;
                this.long = long
               }
               Label.prototype.toString = function() {
                return this.short;
               }
  
          var barChartData2 = {
              //labels : bridge_id_grab,
              labels: [ 
                new Label("J", bridge_mp_grab), 
                new Label("F", "FEB"), 
                new Label("M", "MAR"),
                new Label("A", "APR"),
                new Label("M", "MAY"),
                new Label("J", "JUN"),
                new Label("J", "JUL")
              ],
              datasets : [
                  {
                      label: "My First dataset",
                      fillColor : ["rgba(220,220,220,0.5)"],
                      strokeColor : "rgba(151,187,205,1)",
                      pointColor : "rgba(151,187,205,1)",
                      pointStrokeColor : "#fff",
                      data : bridge_age_grab,
                  }
              ]
            }
  
              var context = document.getElementById('serviceLife').getContext('2d');
  
               window.myObjBar2 = new Chart(context).Bar(barChartData2, {
                  scaleOverride : true,
                  scaleSteps : 10,
                  scaleStepWidth : 10,
                  scaleStartValue : 0,
                  barShowStroke: false,
                  barStrokeWidth : 0,
                  barValueSpacing : 2,
                   customTooltips: function (tooltip) {
                          var tooltipEl = $('#chartjs-tooltip');
  
                          if (!tooltip) {
                              tooltipEl.css({
                                  opacity: 0
                              });
                              return;
                          }
  
                          // split out the label and value and make your own tooltip here
                          var parts = tooltip.text.split(":");
                          var re = new RegExp('\b', 'g');
                          var innerHtml = '&lt;span&gt;&lt;b&gt;' + parts[1].trim() + '&lt;/b&gt;&lt;/span&gt;';
                          tooltipEl.html(innerHtml);
  
                          tooltipEl.css({
                              opacity: 1,
                              // the minimum amount is half the maximum width of the tooltip that we set in CSS ...
                              // ... + the x scale padding so that it's not right at the edge
                              left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
                              top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
                              fontFamily: tooltip.fontFamily,
                              fontSize: tooltip.fontSize,
                              fontStyle: tooltip.fontStyle,
                          });
                      },
                  animation: false,
                  responsive: true,
                  tooltipTemplate: "&lt;%if (label){%&gt;&lt;%=value%&gt;: &lt;%}%&gt;&lt;%= label.long %&gt;",
                  maintainAspectRatio: true,
                 onAnimationComplete: function () {
  
                      var ctx = this.chart.ctx;
                      ctx.font = this.scale.font;
                      ctx.fillStyle = this.scale.textColor
                      ctx.textAlign = "center";
                      ctx.textBaseline = "bottom";
  
                      this.datasets.forEach(function (dataset) {
                          dataset.bars.forEach(function (bar) {
                              ctx.fillText(bar.value, bar.x, bar.y - 5);
                          });
                      })
                  }
              });
  
               var bars = myObjBar2.datasets[0].bars;
              for(i=0;i&lt;bars.length;i++){
                 var color="#07c602";
                 //You can check for bars[i].value and put your conditions here
  
                 if(bars[i].value&lt;11){
                  color="#07c602"
                 }    
                 else if(bars[i].value&lt;21){
                  color="#61e738"
                 }    
                 else if(bars[i].value&lt;31){
                  color="#b6f277"
                 }    
                 else if(bars[i].value&lt;41){
                  color="#ffffb2"
                 }    
                 else if(bars[i].value&lt;51){
                  color="#fed976"
                 }    
                 else if(bars[i].value&lt;61){
                  color="#feb24c"
                 }                  
                 else if(bars[i].value&lt;71){
                  color="#fd8d3c"
                 }
                 else if(bars[i].value&lt;81){
                  color="#fc4e2a"
                 }                  
                 else if(bars[i].value&lt;91){
                  color="#e31a1c"
                 }
                 else{
                  color="#b10026"
                 }
  
                 bars[i].fillColor = color;
  
              }
              myObjBar2.update(); 
  </code></pre>
  
  <p>Here is a couple of fiddles that I am using as reference:
  <a href="https://jsfiddle.net/gf3g4b55/" rel="nofollow">https://jsfiddle.net/gf3g4b55/</a>
  <a href="http://jsfiddle.net/tpydnyx6/" rel="nofollow">http://jsfiddle.net/tpydnyx6/</a></p>