Rails bootstrap tooltip style not working

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>

Do you have jQueryUI included? jQuery doesn't have tooltips. — isherwood, Nov 13 '13 at 19:51
Yeah I do, it is being included with this line `//= require jquery_ujs` in the application.js — covard, Nov 13 '13 at 19:51
There's probably a way to scope it, but you could probably also build a custom jQueryUI package without tooltip(). — isherwood, Nov 13 '13 at 19:53
http://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap — isherwood, Nov 13 '13 at 19:54
I tried to use that earlier and it was still generating the same markup. Unless I am putting it in the wrong section. — covard, Nov 13 '13 at 19:56
I get an error when trying that solution `'undefined' is not an object (evaluating '$.widget.bridge')` — covard, Nov 13 '13 at 20:12

score 3 · Accepted Answer · answered Nov 13 '13 at 20:38

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.

score 2 · Answer 2 · answered Apr 30 '14 at 06:39

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

Thanks! This helped me figure out a simple solution :-) – Abdo Dec 12 '14 at 09:00 — Abdo, Dec 12 '14 at 09:00

score 0 · Answer 3 · answered Dec 12 '14 at 08:57

@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 .

Rails bootstrap tooltip style not working

3 Answers3