Question

我使用bootstrap的工具提示有问题。工具提示出现，但它没有css。所以我看到的是一个没有css的工具提示框。

但如果我添加这一行：

<script src="http//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

在调用调用的css之前：

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

然后出现css并且工具提示正确显示。问题是我们正在使用版本3.3.1，一旦我将javascript行更改为此版本，它就会停止工作。

这就是我们在系统上配置js的方法：

// file: require-setup.js
//
// Declare this variable before loading RequireJS JavaScript library
// To config RequireJS after it’s loaded, pass the below object into require.config();

var require = {

    shim : {
        "bootstrap" : { "deps" :['jquery'] },
        'treegrid' : { "deps" :['bootstrap'] },
        "treegridBS3" : { "deps" :['treegrid'] },
        "tagsinput" : { "deps" :['bootstrap'] },
        "typeahead" : { "deps" :['bootstrap'] },
        "combobox" : { "deps" :['bootstrap'] },
        "datepicker" : { "deps" :['bootstrap'] },
        "moment" : { "deps" :['jquery'] },
        "datetimepicker" : { "deps" :['bootstrap','moment'] },
        "touchspin" : { "deps" :['bootstrap'] },
        "metisMenu" : { "deps" :['bootstrap'] },
        "jquery-ui" : { "deps" :['jquery'] },
        "fancytree" : { "deps" :['jquery-ui'] },
        "datatables.net": { "deps" :['jquery'] },
        "datatables": { "deps" :['bootstrap', 'datatables.net'] },
        "jquery-browser": { "deps" :['jquery'] }
    },
    paths: {

        "jquery" : "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min",
        "bootstrap" :  "https://cdn.jsdelivr.net/bootstrap/3.3.1/js/bootstrap.min",
        "tagsinput" :  "https://cdn.jsdelivr.net/bootstrap.tagsinput/0.5.0/bootstrap-tagsinput.min",
        "typeahead" :  "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.1/bootstrap3-typeahead.min",
        "treegridBS3"  :  "https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid.bootstrap3", 
        "treegrid"  : "https://cdnjs.cloudflare.com/ajax/libs/jquery-treegrid/0.2.0/js/jquery.treegrid",
        "datepicker"  : "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min",
        "moment" : "https://cdn.jsdelivr.net/momentjs/2.13.0/moment.min",
        "datetimepicker" : "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min",
        "touchspin" : "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/3.1.1/jquery.bootstrap-touchspin.min",
        "metisMenu" : "https://cdn.jsdelivr.net/bootstrap.metismenu/1.1.2/js/metismenu.min",
        "jquery-ui" : "https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min",
        "fancytree" : "https://cdn.jsdelivr.net/jquery.fancytree/2.15.0/jquery.fancytree-all.min",
        "datatables.net" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min",
        "datatables" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min",
        "combobox" : "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.7/js/bootstrap-combobox.min",
        "jquery-browser" : "https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min"
    }

    //"datatables" : "https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min",
    //"datatables_bs3" : "https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min"

};
//"jquery" : "../../assets/javascripts/jquery-2.1.3",

这就是我的html开始的方式：

<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Cost Centre Management</title>

<script type="text/javascript"
    src="../../assets/javascripts/require-setup.js"
    th:src="@{/assets/require-setup.js}">

</script>
<script type="text/javascript"
    src="https://cdn.jsdelivr.net/requirejs/2.1.14/require.min.js">

</script>

在html的某个时刻我有这个应该正确显示工具提示的地方：

<td><a href="#" data-toggle="tooltip" data-placement="right"
                                                            title="WIREFRAME FUND"
                                                            th:title="|${costCentreSearchResult.fundDescription}|"
                                                            th:text="${costCentreSearchResult.fundCode}">FUND_CODE</a>
                                                        </td>

注意：该行位于html的末尾。在jquery之后。

如何修复工具提示缺少的Twitter Bootstrap css？

0 个答案: