tooltips with custom forms

[david.waldrop]

Does anyone have a suggestion for how to implement a tooltip/rollover
capability when using custom forms like below:


<table>
<tr>
<td>Meeting Name:</td>
{{form.element('input',_name='name')['_size']=50}}
<td>{{=form.custom.widget.name}}</td>
</tr>
<tr>
<td>Password:</td>
<td>{{=form.custom.widget.password}}</td>
<td>{{=form.custom.label['password']}}</td>
</tr>
<tr>
<td>Status:</td>
<td>{{=form.custom.widget.status}}</td>
<td>{{=form.custom.label['status']}}</td>
</tr>

Ideally I would like to use the comment attribute specified in the
table definition as the test to display. I did see a couple of
examples but they seemed to work with non-custom forms and I could not
figure out how to invoke the tooltip/mouseover.

[Brian M]

{{=form.custom.comment.field_name}} will have the comment that you
defined in the table definition.

Perhaps check out qTip (http://craigsworks.com/projects/qtip/) for a
way to create & trigger the tooltips.

In your view you can do:

<tr>
<td>{{=form.custom.label.field_name}}:</td>
<td>{{=form.custom.widget.field_name}} </td>
</tr>

<script type="text/javascript">
$(document).ready(function()
{

//enable a qTip on the desired field (see qTip docs for how you
could globally enable)
$('#table_fieldname').qtip({
content: '{{=form.custom.comment.field_name}}',
position: {
corner: {
tooltip: 'leftMiddle', // <-Arrow will be in in
the middle of the tip's left side
target: 'rightMiddle' // ...pointing at the
middle of the field's right side
}
},
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with
automatic corner detection
name: 'dark' // Style it according to the preset
'dark' style
},
show: {when: { event: 'focus' }},
hide: 'blur'
});

})
</script>


--Brian