title: How to set x axis value as tooltip in flot charts textual data
body: <p>I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    var data = [
      ["Aug 06", 2],
      ["Aug 07", 1],
      ["Aug 08", 1.5],
      ["Aug 09", 0],
      ["Aug 10", 0],
      ["Aug 11", 0],
      ["Aug 12", 0]
    ];
    var options = {
  
      series: {
        lines: {
          show: true,
          lineWidth: 1,
          fill: true,
          fillColor: {
            colors: [{
              opacity: 0.5
            }, {
              opacity: 0.2
            }]
          }
        },
        points: {
          show: true,
          lineWidth: 2
        },
        shadowSize: 0
      },
      grid: {
        hoverable: true,
        clickable: true,
        tickColor: "#eeeeee",
        borderWidth: 0,
        hoverable: true,
        clickable: true
      },
      tooltip: true,
      tooltipOpts: {
        content: "Your sales for &lt;b&gt;%x&lt;/b&gt; was &lt;span&gt;$%y&lt;/span&gt;",
        defaultTheme: false
      },
      xaxis: {
        mode: "categories",
        tickLength: 0
      },
      yaxis: {
        min: 0
      },
      selection: {
        mode: "x"
      }
    };
    $.plot("#section-chart", [data], options);
  
    // Add the Flot version string to the footer
  
    $("#footer").prepend("Flot " + $.plot.version + " &amp;ndash; ");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#section-chart {
    width: 600px;
    height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div id="section-chart" class="demo-placeholder"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When hover the values, tooltip shows &quot;Your sales for <strong>%x</strong> was $2&quot; instead it should shows  <code>Your sales for Aug 06 was $2</code> Here how should i pass x axis values as tooltip in flot chart?
  What i have done wrong on this. kindly advice ?</p>