I have a problem with the tooltip using bootstrap. The tooltip appears, but it's without the css. So all I see is a box with the tooltip without the css.
But if I add this line:
<script src="http//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
right before calling the css that calls:
$('[data-toggle="tooltip"]').tooltip();
Then the css appears and the tooltip displays properly. The thing is that we're using version 3.3.1 and once I change the javascript line to this version it stops working.
This is how we're configuring the js on the system:
// 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",
And that's how my 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 some point on the html I have this where it should display properly the 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: The line is at the end of the html. After the jquery.