title: conflict between twitter-bootstrap and HighCharts plugin
body: <p>I am using the twitter-bootstrap framework for few of its features such as tooltip, typeahead and datepicker. </p>
  
  <p>I am also using <code>HighCharts</code> plugin to display charts on the same page.</p>
  
  <p>But there seem to be some sort of conflict between the two. Bootstrap features stop working due to the HighCharts code and I get errors on console related to bootstrap:</p>
  
  <pre><code>TypeError: $("a[rel='tooltip']").tooltip is not a function
  </code></pre>
  
  <p>And when I remove the HighCharts code, bootstrap features comes up just perfectly fine.</p>
  
  <p>So can anyone guide me to resolving this issue. </p>
  
  <p>Am using following js files:
  <strong>HighCharts</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="js/highcharts.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/exporting.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" &gt;    
  $(function () {
      $(document).ready(function() {                  
  
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'chart',
                  type: 'column'
              },
              title: {
                  text: 'Monthly Expenditure'
              },
              subtitle: {
                  text: ''
              },
              xAxis: {
                  categories: ['Months'],
                  title: {
                      text: null
                  }
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Expenditure',
                      align: 'high'
                  },
                  labels: {
                      overflow: 'justify'
                  }
              },
              tooltip: {
                  formatter: function() {
                      return ''+
                          this.series.name +': '+ this.y +' (local currency)';
                  }
              },
              plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: true
                      }
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -100,
                  y: 100,
                  floating: true,
                  borderWidth: 1,
                  backgroundColor: '#FFFFFF',
                  shadow: true
              },
              credits: {
                  enabled: false
              },
              series: &lt;?=json_encode($series);?&gt;                       
          });
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Bootstrap</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.8.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  </code></pre>