[英]Bootstrap Tooltip NOT A FUNCTION when jQuery DataTables is initialized
Maybe the answer's here and I'm just not seeing it, so any assistance would be most welcome. 也许答案在这里,我只是没有看到它,所以任何帮助都会受到欢迎。 I have a table, that I'm loading jQuery DataTables onto, plus I'm using Bootstrap, and some of the spans IN the td's have Bootstrap tooltips.
我有一个表,我正在加载jQuery DataTables,而且我正在使用Bootstrap,并且td中的一些跨度具有Bootstrap工具提示。 The tooltips work fine, just by themselves, since I have the init script in the footer - but when I add the dataTables basic init script, suddenly I get the error:
工具提示工作正常,只是自己,因为我在页脚中有init脚本 - 但是当我添加dataTables基本初始化脚本时,我突然收到错误:
Uncaught TypeError: $(...).tooltip is not a function 未捕获的TypeError:$(...)。tooltip不是函数
Here's what I have: 这就是我所拥有的:
HTML5 HTML5
<table id="resources" class="hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Type</th>
<th>Title</th>
<th>Thumbnail</th>
<th>Instrument</th>
<th>Share</th>
<th>Resources</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Type</th>
<th>Title</th>
<th>Thumbnail</th>
<th>Instrument</th>
<th>Share</th>
<th>Resources</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Video</td>
<td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td>
<td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg" alt="Title of Video" class="img-responsive img-resource"></a></td>
<td>Insutrment</td>
<td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td>
<td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td>
</tr>
</tbody>
</table>
JS JS
$(document).ready(function(){
$("#resources").DataTable();
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
});
I'm loading in the following libraries: 我正在加载以下库:
Seems to be working. 似乎工作。
$(document).ready(function() { $("#resources").DataTable(); $('[data-toggle="tooltip"]').tooltip(); });
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <table id="resources" class="hover" cellspacing="0" width="100%"> <thead> <tr title="Tooltip Test"> <th>Type</th> <th>Title</th> <th>Thumbnail</th> <th>Instrument</th> <th>Share</th> <th>Resources</th> </tr> </thead> <tfoot> <tr> <th>Type</th> <th>Title</th> <th>Thumbnail</th> <th>Instrument</th> <th>Share</th> <th>Resources</th> </tr> </tfoot> <tbody> <tr> <td>Video</td> <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td> <td> <a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg" alt="Title of Video" class="img-responsive img-resource"></a> </td> <td>Insutrment</td> <td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td> <td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.