Bootstrap v3 tooltip not showing default style

Question

For some reason my bootstrap tooltip is showing as a white box

instead of the default black cornered box

I am calling the tooltip in jquery as $('[data-toggle="tooltip"]').tooltip();

Here is my html <i class="fa fa-usd" aria-hidden="true" style="color: green" data-toggle="tooltip" title="Billable"></i>

To be safe I re-downloaded bootstrap v3 again from their site and replaced all my files js and css to see if that would make a difference but it does not.

I can't seem to figure out why my bootstrap tooltip is showing differently.

try these points 1. load jquery file before bootstrap 2. remove and check jquery.UI file - as white tooltip looks like jqueryUI tooltip 3. write tooltip script `$('[data-toggle="tooltip"]').tooltip();` at the end of the body — srinivas.ln, Sep 05 '17 at 06:38
ah your right it does look like the jquery tooltip, awesome as soon as I get into work I will check it out and let you know. Thanks — Cesar Bielich, Sep 05 '17 at 18:45

score 0 · Answer 1 · edited Sep 07 '17 at 04:47

Change JQueryUI plugin names to fix name collision with Bootstrap.

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

Please check below snippet which as both jQuery UI and Bootstrap tooltips in single page.

Reference: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 tooltip not showing default style

1 Answers1