工具提示不顯示（Twitter的引導）

Question

注：我在JavascriptňjQuery的

0技能我使用Twitter的引導對於一個小型的家庭樹。我堅持的步驟是我想在單擊鏈接（一個人）時顯示一些信息。我經歷了bootstrap文檔，工具提示用法看起來非常簡單。然而它力度的工作。我搜索了大約50種不同的解決方案，還有更多來自Stack Overflow。這些解決方案似乎都不適用於我正在處理的文件。但是，如果在不同的文件上嘗試它們，它們就會工作。我完全無能爲力，爲什麼在同一時間發生這種事情讓人感到沮喪，因爲這個肩膀非常容易。由於文件太大，我正在粘貼這裏的重要片段。

進口幾乎任何我能想到的：

<link href="bootstrap/css/sidebar.css" rel="stylesheet"> 
    <link href="bootstrap/css/infospan.css" rel="stylesheet"> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <script src="js/jquery-1.11.1.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/bootstrap-tooltip.js"></script> 
    <script type = "text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

的家譜（這是每個分支的樣子）：

<a href="#" data-placement="right" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right">Me</a> 

JS代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".tip-right").tooltip({placement : 'right'});  
}); 
</script> 

我試着把它放在頂部和底部。但沒有突破。

我想要的只是顯示一些文字onclick，但我得到的工具提示即使在默認參數上也能正常工作。

任何幫助將不勝感激。

編輯： 這是樹的樣子

<div class="tree"> 
       <ul> 
        <li> 
         <a href="#">grandma</a><a href="first.html">Grandpa</a> 
         <ul> 
          <li> 
           <a href="#">Son</a><a href="#">DOL</a> 
           <ul> 
            <li> 
             <a href="#">d1</a> 
            </li> 
            <li> 
             <a href="#">d2</a> 
            </li> 
            <li> 
             <a href="#">s1</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href="#">son2</a><a href="#">dol2</a> 
           <ul> 
            <li> 
             <a href="#">s1</a> 
            </li> 
            <li> 
             <a href="#">d1</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href="#">mum</a><a href="#">dad</a> 
           <ul> 
            <li> 
             <a href="#">sol1</a><a href="#">d1</a> 
             <ul> 
              <li> 
               <a href="#">d1</a> 
              </li> 
              <li> 
               <a href="#">d2</a> 
              </li> 
             </ul> 
            </li> 
            <li> 
             <a href="#">sol2</a><a href="#">d2</a> 
             <ul> 
              <li> 
               <a href="#">d1</a> 
              </li> 
             </ul> 
            </li> 
            <li> 
             <a href="#" data-placement="right" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right">me</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href="#">dot1</a><a href="#">sol1</a> 
           <ul> 
            <li> 
             <a href="#">s1</a> 
            </li> 
            <li> 
             <a href="#">s2</a> 
            </li> 
            <li> 
             <a href="#">d1</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href="#">s3</a> 
          </li> 
          <li> 
           <a href="#">s4</a><a href="#">dol3</a> 
           <ul> 
            <li><a href="#">s1</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

顯然，D1，S1等的名字。只是在這裏改變它們

Answer 1

導入你能想到的所有東西都是第一個錯誤。只包括縮小版本。另外，引導JS組件需要jQuery的，所以你需要插入第一

<script src="//code.jquery.com/jquery-2.11.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 

兩個bootstrap.js和bootstrap.min.js包含在一個單一文件中的所有插件。只包括一個。

您已經添加了放置的數據屬性，所以你只需撥打

$("[data-toggle=tooltip]").tooltip();  

Bootply http://www.bootply.com/t32oBXBH7W