Question

I have limited screen space for a table that I’m displaying, so I’m showing a truncated view of a description field:

<td><%= simple_format car.description.truncate(200, :separator => ' ') %></td>

I need a mouse over or click event to generate a simple pop up window (an “alert”, a “tool tip”, a “dialog”, etc.) displaying the full contents of the car.description field.

I’m an admitted JS rookie. All the JS-Rails tutorials/information that I’m seeing are focused on unobtrusive JS, dealing mostly with AJAX/remote server interactions. I’m not seeing anything that helps understand how you can use data from your Rails application in rich JS UI features within your views. I saw a tool tip gem, but with that gem, tool tip content is statically generated, and tool tips are held in their own table. It provides no way to generate a tool tip on the fly, based on a field pulled from the database.

Is there some very, very simple way to have JS pop-up the text held in a Rails field?

Answer 1

I created a dummy rails project @ https://github.com/rahul/SO_9347471. I used the modal library provided by twitter’s bootstrap @ http://twitter.github.com/bootstrap/index.html.

Download that project and,

1. bundle install
2. rake db:migrate
3. rake db:seed
4. rails server
5. hit localhost:3000 in your browser

I created a modal div for each car and when the bootstrap javascript library loads, it converts all such divs into bootstrap modals (and hides them, waiting for a user to click on the truncated text)

====================================

Take a look a

http://jqueryui.com/demos/dialog/

and then

http://twitter.github.com/bootstrap/javascript.html#modals

They contain an easy to follow documentation to help you get started. Let me know if you need more clarification.