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的形式提示

回答

相關問題