>
> 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.
> Is there some very, very simple way to have JS pop up the text held in a Rails field?
If you use the Title attribute on the shortened example, you could get a poor-man's popup for free:
<td><span class="more" title="<%=simple_format car.description %>"><%= simple_format car.description.truncate(200, :separator => ' ') %></span></td>
Then you could layer over that some JavaScript to pull the title content into a rich popup if you like. But all alone, this will give you an accessible solution with minimal code. If you added some CSS to the .more class, you could change the cursor on mouseover to clue the user, or add some color or underline to make it really apparent.
Walter
Walter - this is a perfect work-around; thanks for the great idea. I'll use it in the short term, until I can figure out my real issue. There is something very basic that I'm not getting/finding. How do I access JS libraries for enhancing my UI from within a html.erb view? If you can point me to any resources or code examples that would be great.
Don
You can add libraries to the application.html.erb outer template by defining content_for :head with the link, or you can simply apply that library to every page (it's a toss-up whether having it cached will be faster in the long run than loading the library on only the pages you need it)
<%= content_for :head, javascript_include_tag( 'your-library-name-here' ) %>
If this is the only view where you need this functionality, then you can simply add the JavaScript to call that library directly into your view, below the part of the HTML where you define the elements you're affecting. If you were to carry my example forward, and you were using Prototype (I don't know the jQuery equivalent off-hand), you could do the following:
< your table or list of elements here >
<script type="text/javascript">
if(!$('overlay')){
$$('body').invoke('insert',new Element('div',{id: 'overlay',style: 'display:none;'}));
$('overlay').insert(new Element('div',{id: 'message'}));
}
document.observe('click',function(evt){
var elm;
if (elm = evt.findElement('span.more')){
$('message').update(elm.readAttribute('title'));
$('overlay').show();
}else if(elm = evt.findElement('#overlay')){
elm.hide();
}
});
</script>
Add some css to make this a proper 'dim out the page' overlay, and you're done. Or simply style it as a popup. That part is entirely up to how you want it to appear. If you wanted to kill the mouseover effect of showing the title as a browser tooltip, you could do a setup as the page loads to shuffle the title value off to a private variable on the span, and update your click observer appropriately.
$$('span.more').each(function(elm){
elm.store('popup',elm.readAttribute('title');
elm.writeAttribute('title',null);
});
document.observe('click',function(evt){
var elm;
if (elm = evt.findElement('span.more')){
$('message').update(elm.retrieve('popup'));
$('overlay').show();
}else if(elm = evt.findElement('#overlay')){
elm.hide();
}
});
The benefit to this layered approach is that you don't hide anything from screen readers or Google.
Walter
