Javascript 工具提示不显示（Twitter引导）

注意：我在JavaScriptnjQuery方面没有任何技能

我正在用twitter引导一个小的家谱。我一直坚持的一步是，当点击链接（一个人）时，我想显示一些信息。我浏览了引导文档，工具提示的使用看起来很简单。然而，它不起作用。我在谷歌上搜索了大约50种不同的解决方案，还有更多来自堆栈溢出的解决方案。在我正在处理的文件上，似乎没有一个解决方案有效。但是，如果它在不同的文件上尝试它们，它们就会工作。我完全不明白为什么这件事会同时发生，因为这应该很容易。由于文件太大，我只在这里粘贴重要的片段

进口了我能想到的任何东西：

<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>

家谱（这是每个分支的外观）：

js代码：

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

$（文档）.ready（函数（）{
$（“.tip right”）.tooltip（{placement:'right'}）；
});

我试着把它放在顶部和底部。但没有突破

我只想在单击时显示一些文本，但即使在默认参数上也可以使用工具提示

任何帮助都将不胜感激

编辑： 这就是这棵树的样子

<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等是名称。只是在这里更改了它们

导入您能想到的所有内容是第一个错误。仅包括缩小版。此外，引导JS组件需要jQuery，因此需要先插入jQuery

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

---

Bootply

我创建了一个普通/原生Javascript工具提示，完全可定制，代码非常直观，即使我自己也这么说。如果你感兴趣，请告诉我，我会发布代码。我已经遇到过这种方法。它在小提琴上工作，如果我创建一个单独的文件。它在我的树上仍然不起作用。我强烈怀疑这是我写这棵树的方式。我在问题中添加了树代码。您的示例树代码中存在语法错误（树底部的ul和li太多）。否则，在为所有元素插入数据切换和标题后，它似乎可以工作，请参见：是的，我找到了，并获得了工具提示。非常感谢您的帮助：）

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

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