Reputation: 12384
In a big form, I want to display additional information on each form field when they are active, something like this:
So each form field has an associated tip text, and this tip text is displayed on focus.
Something linke this in html/javascript:
<input type="text" id="VIN" name="VIN" class="tooltipped">
<label for="VIN" class="formfieldtooltip">A vehicle Iden... </label>
<input type="text" id="Brand" name="Brand" class="tooltipped">
<label for="Brand" class="formfieldtooltip">In Danish "brand" means "fire"</label>
<script type="text/javascript">
jQuery(function($) {
$(".tooltipped").FormFieldToolTipBinder();
});
</script>
That runs through all form fields with the class "tooltipped" and displays the associated label on focus.
Does something like that exist already, or do I have to write it myself?
And yes, I have googled - and found a lot of plugins to make the actual tooltips, but nothing that wires them up with formfields automagically like this.
Upvotes: 1
Views: 6950
Reputation: 48675
It sounds like you may be stuck embedding tooltip content in the label
elements - but if you're free to move the content into the alt
attribute of your input
elements, you can do what you want with qTip, like this:
<input type="text" id="VIN" class="tooltipped" alt="A vehicle iden...">
and
// content: false tells qtip to use the selected elements' alt text
$('.tooltipped').qtip({
content: false,
show: { when: { event: 'focus' } }
});
Upvotes: 5
Reputation: 17617
Actually it's quite easy to write yourself. Here's something to get you started:
var tooltip = function (formElementId) {
var form = $('#' + formElementId),
toolTipClass = 'tooltip',
input = form.find('input.'+ tooltip);
input.each(function (index, elem) {
$(elem).focus(function () {
$(this).parent().append('<div id="tooltip"></div>');
})
$(elem).blur(function () {
$('#tooltip').remove();
})
});
}
Upvotes: 1