javascript - How to fix Twitter Bootstrap css missing for the tooltip? -
i have problem tooltip using bootstrap. tooltip appears, it's without css. see box tooltip without css.
but if add line:
<script src="http//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> right before calling css calls:
$('[data-toggle="tooltip"]').tooltip(); then css appears , tooltip displays properly. thing we're using version 3.3.1 , once change javascript line version stops working.
this how we're configuring js on system:
// file: require-setup.js // // declare variable before loading requirejs javascript library // config requirejs after it’s loaded, pass below object 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", and that's how html starts:
<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> at point on html have should display tooltip:
<td><a href="#" data-toggle="tooltip" data-placement="right" title="wireframe fund" th:title="|${costcentresearchresult.funddescription}|" th:text="${costcentresearchresult.fundcode}">fund_code</a> </td> note: line @ end of html. after jquery.
Comments
Post a Comment