Question

注意：我在Javascript n Jquery

中有0个技能

我正在使用twitter bootstrap作为一个小型家族树。我坚持的步骤是，我想在点击链接（一个人）时显示一些信息。我已经浏览了自举文档，工具提示的使用看起来非常简单。然而它的工作。我用Google搜索了大约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

导入你能想到的一切是第一个错误。仅包含缩小版本。 Bootstrap 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

未显示工具提示（Twitter Bootstrap）

1 个答案: