引导V3提示不显示默认样式
问题描述:
出于某种原因,我的引导工具提示显示默认的黑色的 引导V3提示不显示默认样式
不是作为一个白盒狗急跳墙盒
我打电话的工具提示jquery as $('[data-toggle="tooltip"]').tooltip();
这是我的html <i class="fa fa-usd" aria-hidden="true" style="color: green" data-toggle="tooltip" title="Billable"></i>
为了安全起见,我再次从他们的站点下载了bootstrap v3,并将我的所有文件js
和css
替换掉,看看它们是否会有所作为,但不会。
我似乎无法弄清楚为什么我的引导工具提示显示不同。
答
更改JQueryUI插件名称以修复与Bootstrap的名称冲突。
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
请检查下面的代码片段,它作为jQuery UI和Bootstrap工具提示在单页中。
参考:http://*.com/a/27745464/1233379
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<div class="container">
<h3>Jquery UI Tooltip Example</h3>
<p><a href="#" class="jqui-tooltip" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<h3>Bootstrap Tooltip Example</h3>
<a href="#" data-toggle="tooltip" data-title="Hooray!">Hover over me</a>
<script>
//jquery UI tooltip
$(function() {
$('.jqui-tooltip').uitooltip();
});
</script>
<script>
//bootstrap tooltip
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>
</body>
</html>
清晰的浏览器缓存和检查.. – cna327
香港专业教育学院试过和几个浏览器,不是在所有这些以前 –
尝试这些要点1.负荷的jQuery文件bootstrap 2.删除并检查jquery.UI文件 - 如白色工具提示看起来像jqueryUI工具提示3.编写工具提示脚本'$('[data-toggle =“tooltip”]')。tooltip();'在主体的末尾 – cna327