如何像Stack Overflow Career CV表单那样显示表单控件的UI提示？

Question

我正在尝试在ASP.NET MVC2应用程序上显示一些UI提示，很像编辑/填写简历时它们在求职网站上的显示方式:当表单控件具有焦点时，有关如何输入所需信息的小说明会出现在它旁边。

Example #1 http://shog9.com/so_careertip2.png Example #2 http://shog9.com/so_careertip1.png

什么是最好的方法来展示这些笨蛋...

Answer 1

类似于这样的东西：

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();
})

Answer 2

擦干净你的耳朵！

我的意思是使用jQuery的Qtip插件：http://craigsworks.com/projects/qtip/

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

Answer 3

jQuery将简化这一过程，但它可以很容易地成为标准JS。

类似于：

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

其中表单控件具有自定义属性，或仅使用匹配(不完全相同)的ID。