JQuery的形式提示

在一个大的形式，我想显示在每个表单字段其他信息时，他们是活跃，这样的事情：JQuery的形式提示

alt text http://i50.tinypic.com/1sehlj.png

所以每个表单字段都有一个相关的提示文本，并且此提示文本显示在焦点上。

东西临客这个在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>

通过与类“tooltipped”的所有窗体字段运行并显示焦点关联的标签。

有没有这样的事情已经存在，还是我必须自己写？

是的，我用Google搜索 - 发现了很多插件，使实际的工具提示，但没有什么电线他们与formfields自动将这个样子。

来源

2009-12-09 Kjensen

这听起来像你可能被卡住嵌入在label元素提示的内容 - 但如果你可以自由地将内容转移到您的input元素，you can do what you want with qTip的alt属性，像这样：

<input type="text" id="VIN" class="tooltipped" alt="A vehicle iden...">

和

// content: false tells qtip to use the selected elements' alt text 
$('.tooltipped').qtip({ 
    content: false, 
    show: { when: { event: 'focus' } } 
});

来源

2009-12-09 15:21:40

其实我没有坚持这一说法，所以这个完美的作品。我只是添加了一些处理模糊事件，所以提示消失了，然后我完成了。谢谢。 :) – Kjensen 2009-12-09 20:03:31

实际上写起来很容易。这里的东西，让你开始：

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

来源

2009-12-09 14:51:36 fredrik

JQuery的形式提示

回答

相关问题