title: Bootstrap 3.0 Popovers and tooltips
body: <p>I am new to Bootstrap and I'm having trouble getting the popover and tooltip features to work. I had no problem with the drop downs and models but I seem to be missing something for the popover and tooltips. </p>
  
  <p>I am getting tooltips to show up but they are not styled and located like the bootstrap examples. And the popover is not working at all.</p>
  
  <p>Please take a look and let me know what I am missing.</p>
  
  <pre><code>       &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;!-- Bootstrap --&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
          &lt;link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"&gt;
          &lt;link href="css/font-awesome.min.css" rel="stylesheet" media="screen"&gt;
          &lt;link href="css/index.css" rel="stylesheet" media="screen"&gt;
          &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="../../assets/js/html5shiv.js"&gt;&lt;/script&gt;
            &lt;script src="../../assets/js/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
        &lt;/head&gt;
        &lt;body&gt;
         &lt;p id="tool"class="muted" style="margin-bottom: 0;"&gt;
          Tight pants next level keffiyeh
          &lt;a href="#" data-toggle="tooltip" title="Default tooltip"&gt;you probably&lt;/a&gt; haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel &lt;a href="#" data-toggle="tooltip" title="Another tooltip"&gt;have a&lt;/a&gt; terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan &lt;a href="#" data-toggle="tooltip" title="Another one here too"&gt;whatever keytar&lt;/a&gt;, scenester farm-to-table banksy Austin &lt;a href="#" data-toggle="tooltip" title="The last tip!"&gt;twitter handle&lt;/a&gt; freegan cred raw denim single-origin coffee viral.&lt;/p&gt;
         &lt;h3&gt;Live demo&lt;/h3&gt;
          &lt;div style="padding-bottom: 24px;"&gt;
            &lt;a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?"&gt;Click to toggle popover&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
          &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
          &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
  
                  $('.tool').tooltip();
                  $('.btn').popover();
  
              }); //END $(document).ready()
  
          &lt;/script&gt;
  
          &lt;script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"&gt;&lt;/script&gt;
  
        &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>