title: Tooltip is not Displayed (Twitter Bootstrap)
body: <p>Note: I have 0 skills in Javascript n Jquery</p>
  
  <p>I am using twitter bootstrap for a small family tree. The step I am stuck on is that I want to display some information when a link (a person) is clicked upon. Ive gone through the bootstrap documents and the tooltip usage looked pretty straight forward. However it dint work. Ive googled about 50 different solutions and many more from Stack Overflow. None of the solutions seem to work on the file I am working on. However they work if it try them on different files. I am completely clueless as to why this is happenning at the same time frustrated because this shoulve been really easy. Since the file is too large I am pasting just the important snippets here.</p>
  
  <p>Imported just about anything I could think of:</p>
  
  <pre><code>&lt;link href="bootstrap/css/sidebar.css" rel="stylesheet"&gt;
      &lt;link href="bootstrap/css/infospan.css" rel="stylesheet"&gt;
      &lt;link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;script src="js/jquery-1.11.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script type = "text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The family tree (this is what each branch looks like) :</p>
  
  <pre><code>&lt;a href="#" data-placement="right" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right"&gt;Me&lt;/a&gt;
  </code></pre>
  
  <p>The js code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $(".tip-right").tooltip({placement : 'right'});    
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Ive tried placing this both on the top as well as at the bottom. But no breakthrough. </p>
  
  <p>All i want is the display some text onclick , but I get the tooltip to work even on default parameters. </p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <p><strong>EDIT:</strong>
  This is how the tree looks like</p>
  
  <pre><code>&lt;div class="tree"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;grandma&lt;/a&gt;&lt;a href="first.html"&gt;Grandpa&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;Son&lt;/a&gt;&lt;a href="#"&gt;DOL&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;d1&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;d2&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;s1&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;son2&lt;/a&gt;&lt;a href="#"&gt;dol2&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;s1&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;d1&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;mum&lt;/a&gt;&lt;a href="#"&gt;dad&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;sol1&lt;/a&gt;&lt;a href="#"&gt;d1&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li&gt;
                                                  &lt;a href="#"&gt;d1&lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li&gt;
                                                  &lt;a href="#"&gt;d2&lt;/a&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;sol2&lt;/a&gt;&lt;a href="#"&gt;d2&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li&gt;
                                                  &lt;a href="#"&gt;d1&lt;/a&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" data-placement="right" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right"&gt;me&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;dot1&lt;/a&gt;&lt;a href="#"&gt;sol1&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;s1&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;s2&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;d1&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;s3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;s4&lt;/a&gt;&lt;a href="#"&gt;dol3&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;s1&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Obviously the d1, s1 etc are names. Just changed them here</p>