Bootstrap v3 工具提示未显示默认样式答案

【问题标题】：Bootstrap v3 tooltip not showing default styleBootstrap v3 工具提示未显示默认样式
【发布时间】：2018-02-13 07:38:04
【问题描述】：

由于某种原因，我的引导工具提示显示为白框

而不是默认的黑色角框

我将 jquery 中的工具提示称为$('[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，看看这是否会有所作为，但事实并非如此。

我似乎无法弄清楚为什么我的引导工具提示显示不同。

【问题讨论】：

清除浏览器缓存并检查..
我试过了，还有几个浏览器，都在他们里面
尝试以下几点 1. 在引导之前加载 jquery 文件 2. 删除并检查 jquery.UI 文件 - 因为白色工具提示看起来像 jqueryUI 工具提示 3. 在正文末尾编写工具提示脚本 $('[data-toggle="tooltip"]').tooltip();
啊，你说得对，它看起来确实像 jquery 工具提示，很棒，一旦我开始工作，我会检查它并告诉你。谢谢
就是这样，谢谢。让它成为答案

标签： twitter-bootstrap

【解决方案1】：

更改 JQueryUI 插件名称以修复与 Bootstrap 的名称冲突。

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

请检查下面的 sn-p，它作为单页中的 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>

【讨论】：