title: Tooltip for flot bar chart
body: <p>i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this.
  My code is:</p>
  
  <pre><code>    $(function () {
                  var a1 = [
              [0, 100],
              [1, 200],
              [2,300],
              [3,400],
              [4,500]
  
          ];
          var a2 = [
              [0, 90],
              [1, 150],
              [2,250],
              [3,380],
              [4,450]
              ];
  
      //var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
              var data = [
                  {
                      label: "Pre Transformation",
                      data: a1
                  },
                  {
                      label: "Post Transformation",
                      data: a2
                  }
  
  
  
              ];
  
              $.plot($("#placeholder2"), data, {
                  series: {
                      bars: {
                          show: true,
                          barWidth: 0.13,
                          order: 1
                      }
                  },
                  xaxis: {
                  ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
                  //tickLength: 0
                  },
                      grid: {
                hoverable: true,
               clickable:true
        
               //mouseActiveRadius: 30  //specifies how far the mouse can activate an item
                },
  
  
                  valueLabels: {
                      show: true
                  }
  
             });
  
          });
  
       var previousPoint = null, previousLabel = null;
  
    function showTooltip(x, y, color, contents) {
              $('&lt;div id="tooltip"&gt;' + contents + '&lt;/div&gt;').css({
                  position: 'absolute',
                  display: 'none',
                  top: y - 40,
                  left: x - 120,
                  border: '2px solid ' + color,
                  padding: '3px',
                  'font-size': '9px',
                  'border-radius': '5px',
                  'background-color': '#fff',
                  'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                  opacity: 0.9
              }).appendTo("body").fadeIn(200);
          }
  
          $.fn.UseTooltip = function () {
              $(this).bind("plothover", function (event, pos, item) {
                  if (item) {
                      if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                          previousPoint = item.dataIndex;
                          previousLabel = item.series.label;
                          $("#tooltip").remove();
  
                          var x = item.datapoint[0];
                          var y = item.datapoint[1];
  
                          var color = item.series.color;
  
                          //console.log(item.series.xaxis.ticks[x].label);               
  
                          showTooltip(item.pageX,
                          item.pageY,
                          color,
                          "&lt;strong&gt;" + item.series.label + "&lt;/strong&gt;&lt;br&gt;" + item.series.xaxis.ticks[x].label + " : &lt;strong&gt;" + y + "&lt;/strong&gt; °C");
                      }
                  } else {
                      $("#tooltip").remove();
                      previousPoint = null;
                  }
              });
          };
  </code></pre>
  
  <p>Please help me in this regard.</p>