Rails 3: Twitter-Bootstrap Tooltips Refuse to Work-Collection of common programming errors

This is driving me absolutely bonkers, and it seems like such a simple thing to implement. I can’t get tooltips (or, for that matter, popovers) to work. I have the ‘twitter-bootstrap-rails’ gem installed, and I generated the appropriate .js and .css files.

I don’t think it’s a JQuery issue because I have other JQuery functionality on my site that works perfectly.

Here’s some relevant code.

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap-tooltip
//= require bootstrap-popover
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
//= require_tree .
$('a').tooltip();

application.css

 *= require_self
 *= require_tree .
 *= reqire_twitter/bootstrap

Code I’d like to get to work for tooltips

test

The above code, when hovered over, just shows Chrome’s normal tooltip. I’m getting the same behavior in Safari, so I doubt it’s browser-specific.

1. The solution to this was two-fold.

   1. Change the $ in the code to jQuery. This got rid of the “Object # has no method ‘ready'” error.

   2. I had a bootstrap.js.coffee file that had irrelevant code. When I deleted the file, everything began working again. This got rid of the “Uncaught TypeError: Cannot call method ‘tooltip’ of null” error.

2. I’m using Rails 3.2.7, adding Bootstrap manually. Everything works just fine.

   application.css

   *= require style
   *= require bootstrap.min
   *= require bootstrap-responsive.min
   *= require_tree .
   

   application.js

   //= require jquery
   //= require jquery_ujs
   //= require bootstrap.min
   $(document).ready(function(){
       $('a').tooltip();
   });
   //= require_tree .
   

   and layout/application.html.erb

   
      "all") %>
   
   
   
     
     
     
   
   
   

3. Your application.js code will be executed before your web page is fully loaded into the browser, so your line of code will not find any element prior to the page load.

   You will need to execute when the DOM is fully loaded:

   $(document).ready(function () {
     $('a').tooltip();
   });
   

4. After much fighting, in order to get it working properly with Rails 3.2 I had to do the following:

   1. in application.js:
      

      //= require bootstrap

   2. in the view template where I want the tooltip, include the rel=’tooltip’ attribute:

      = link_to “Link text”, title: ‘Click to reveal tracks’, ‘data-placement’ => ‘top’, rel: :tooltip

   or if you’re not using HAML:

   Link text
   

   1. in any of the coffeescript files (I created a new one) put this:

      jQuery ->
      $(‘[rel=”tooltip”]’).tooltip()

   This works, though the styling for the tooltips are not working, I can’t figure out why, but the javascript seems to be working at least.

   Hopefully this will help someome else.

   As someone commented already, bootstrap-sass includes a coffeescript file which has this in it:

   jQuery ->
     $("a[rel=popover]").popover()
     $(".tooltip").tooltip()
     $("a[rel=tooltip]").tooltip()
   

   If you call this file there is no need to include the other coffeescript file above since this one does the same thing. In my case I already have bootstrap.js called from application.js so this one wasn’t called (I removed require_tree so I can call the files I want in the order I want).

Originally posted 2013-11-15 09:08:47.