3

I am trying to implement the tooltip functionality as shown here: http://twitter.github.com/bootstrap/javascript.html#tooltips using the Bootstrap-sass gem for Ruby on Rails 3. I have done the following below but it doesn't work (text doesn't appear when I hover over text):

In gem file:

gem 'bootstrap-sass', '2.1'

In application.js:

//= require bootstrap

In show.js.erb:

$('#example').tooltip(options);

And in show.html.erb:

<a href="#" id="example" title="first tooltip" data-placement="right">
  hover over me</a>

Why doesn't this work?

application.js:

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

views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script> 
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
  <%= yield %>
  <%= render 'layouts/footer' %>
  <%= debug(params) if Rails.env.development? %>
 </div>
</body>
</html>

Gem file:

source 'https://rubygems.org'

gem 'rails', '3.2.7'
gem 'bootstrap-sass', '2.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby

gem 'uglifier', '>= 1.0.3'
end

group :development do
  gem 'annotate', '2.5.0'
end
Krishna
  • 133
  • 1
  • 10
  • Have you tried `bundle install` on your terminal? If you did, did you attach the css file to the `application.css` in your `assets` file? – thank_you Dec 26 '12 at 22:59
  • Yes the gem is installed properly; I have been using it to do the CSS styling for the page and that is working fine. I have put all of the CSS in custom.css.scss as is done in this tutorial: http://ruby.railstutorial.org/chapters/rails-flavored-ruby#top – Krishna Dec 26 '12 at 23:12
  • Do you have the gem `sass-rails` in your gemfile? Sorry for all these questions, but without seeing a directory or the full source code I don't know what you did or didn't do. – thank_you Dec 26 '12 at 23:38
  • No problem - yes that is installed as well. When you say source code - literally these are the only lines I have put in the show.js.erb and show.html.erb files. Is there a certain line I need to add such as ?? I tried putting some_file_name = "bootstrap.js" and this created no change. Neither did adding the usual jquery $(document).ready(function() – Krishna Dec 27 '12 at 05:51
  • If you placed in your respective application files for js and css, then it should be loaded onto any view file. My best advice is to update your question with your relevant code, i.e. the view page, your js files, and your application file. Or point us towards your github repo. That could work too. I just need to see some sort of directory. – thank_you Dec 27 '12 at 08:07
  • I am thinking the problem may be in the application.html.erb above? I added the files above. – Krishna Dec 27 '12 at 17:22
  • You don't need the jquery script file ` ` in your `application.html.erb` file. Rails does that for you in the application.js file with the line `//= require jquery` – thank_you Dec 27 '12 at 20:43

1 Answers1

2

You needed this:

// Loads all Bootstrap javascripts
//= require bootstrap

from https://github.com/thomas-mcdonald/bootstrap-sass

rrrhys
  • 654
  • 5
  • 18