title: how to customize tool tip while mouse go over bars on Chart js bar chart
body: <p>My plan is to develop a bar chart like shown below
  <img src="https://i.stack.imgur.com/NnKaS.png" alt="enter image description here"></p>
  
  <p>I am developing this in a angular JS platform and using chart JS library for chart.</p>
  
  <p>The problem is i cannot show the tool tip on mouse over of bar as shown in image. Chart JS allowing only to show x and y axis measurement as tool tip. Any one know how can i show some text in tool tip.Pleas help.</p>
  
  <p>Controller code</p>
  
  <pre><code> $scope.chartdata = {
          labels: barchartYaxis,
          datasets: [
              {
                  //label:['a','b','c','d','e','f','g','h','i','j','k','l'],
                  label: '',
                  fillColor: 'rgba(235,163,94,0.5)',
                  strokeColor: 'rgba(220,220,220,0.8)',
                  highlightFill: 'rgba(229,136,94,0.75)',
                  highlightStroke: 'rgba(220,220,220,1)',
                  data: barchartXaxis
              }
          ]
      };
  
      // Chart.js Options
      $scope.chartoptions = {
          responsive: true,
          scaleBeginAtZero: true,
          scaleShowGridLines: true,
          scaleGridLineColor: "rgba(0,0,0,.05)",
          scaleGridLineWidth: 1,
          barShowStroke: true,
          barStrokeWidth: 2,
          barValueSpacing: 5,
          barDatasetSpacing: 1,
          showTooltips: true,
          tooltipEvents: ["mousemove", "touchstart", "touchmove"],
          tooltipFillColor: "rgba(0,0,0,0.8)",
          tooltipTemplate: "&lt;%=label%&gt;,&lt;%=value%&gt;"
          //tooltipTemplate: "&lt;%if (label){%&gt;"+getHtmlFromTopicName("&lt;%=label%&gt;")+"&lt;%}%&gt;"
          //$scope.userDetails = data.user_details;
      }
  </code></pre>
  
  <p>template file</p>
  
  <pre><code>&lt;canvas tc-chartjs-bar chart-options="chartoptions" chart-data="chartdata" auto-legend&gt;&lt;/canvas&gt;
  </code></pre>