如何显示窗体控件的UI提示,如堆栈溢出职业简历窗体?

行中的内容:

CSS:

.field{position:relative;}
.field-help{display:none;background:yellow;position:absolute;left:200px;top:0;}

HTML:

<div class="field">
    <input type="text">
    <div class="field-help">Help text</div>
</div>

jQuery:

$('.field input').bind('focus', function(e) {
    $(e.target).next('.field-help').show();
}).bind('blur', function(e) {
    $(e.target).next('.field-help').hide();
})

清理你的耳朵!

呃,我的意思是使用jquery qtip插件: http://craigsworks.com/projects/qtip/

它能100%地完成你想要的事情,而且做得非常好。

jquery将简化这个过程,但它可以很容易地成为标准JS。

类似:

$('.controlwithhinttext').focus(function() {
    // show hint
    $('#hint' + $(this).attr('hint_to_show_id')).show();
});

如果表单控件具有自定义属性,或者只使用匹配(不相同)的ID。