Question

出于某种原因，我的bootstrap工具提示显示为白色框

而不是默认的黑角框

我将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以查看是否会产生影响，但事实并非如此。

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

Answer 1

更改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>

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

1 个答案: