引導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替換掉，看看它們是否會有所作爲，但不會。

我似乎無法弄清楚爲什麼我的引導工具提示顯示不同。

來源

2017-09-05 Cesar Bielich

清晰的瀏覽器緩存和檢查.. – cna327

香港專業教育學院試過和幾個瀏覽器，不是在所有這些以前 –

嘗試這些要點1.負荷的jQuery文件bootstrap 2.刪除並檢查jquery.UI文件 - 如白色工具提示看起來像jqueryUI工具提示3.編寫工具提示腳本'$（'[data-toggle =「tooltip」]'）。tooltip（）;'在主體的末尾 – cna327

更改JQueryUI插件名稱以修復與Bootstrap的名稱衝突。

$.widget.bridge('uitooltip', $.ui.tooltip); 
$.widget.bridge('uibutton', $.ui.button);

請檢查下面的代碼片段，它作爲jQuery UI和Bootstrap工具提示在單頁中。

參考：http://stackoverflow.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&apos;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>

來源

2017-09-06 11:54:02 cna327

引導V3提示不顯示默認樣式

回答

相關問題