Rails Bootstrap工具提示样式不起作用

Question

I have a rails 4.0 site using bootstrap 3.0. The tooltip is displaying but with no style. The bootstrap example shows that the markup will look like this

<div class="tooltip">
  <div class="tooltip-inner">
  </div>
  <div class="tooltip-arrow"></div>
</div>

However when I inspect it, the markup generated looks like it is jQuery not bootstrap.

<div id="ui-tooltip-18 role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content">
</div>

Here is my application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .

Here is my JavaScript calling the tooltip

$(function(){
  $('[data-toggle=tooltip]').tooltip();
});

Here is my markup on the page:

<h3>Verifications</h3>
<table>
  <% @verification_types.each do |type| %>
    <tr>
      <td><%= link_to "#{type.name}", '#', data: { toggle: "tooltip" }, title: "Default title" %></td>
    </tr>
  <% end %>
</table>

Answer 1

I hate this way around it but I got it to work. I had to add a js file I called it fix_tooltip.js and added this to it $.fn.bstooltip = $.fn.tooltip; then in my script that is calling tooltip it now does $('[data-toggle]').bstooltip(); It feels really hacky and don't like it. But I couldn't get it to work by changing the jQuery-UI tooltip.

Answer 2

I ended up with the following working solution:

application.js

//= require jquery
//= require bootstrap
//= require fix_conflict
//= require jquery.ui.all
//= require jquery_ujs
//= require others
//= require_tree .

fix_conflict.js (thanks for @covard)

$.fn.bstooltip = $.fn.tooltip;

others.js

$('.form a').bstooltip();
#IMPORTANT: Make sure to target the exact element on which the tooltip is defined

HTML

<form class='form' ...>
  ...
  <a href='#' data-toggle='tooltip' title="some tooltip text>?</a>
  ...
 </form>

IMPORTANT : As mentioned above - targeting the exact element where the tooltip is defined is important. Otherwise when using a generic targeting $('.form').bstooltip() I ended up with the JQuery styling/tooltip

Answer 3

@tamersalama 's answer helped me figure out a simple solution:

Do not include all jquery-ui plugins but rather just those you need (minus the tooltip plugin)

Here's my application.js:

//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .