用工具提示进行客户端验证，rails

Question

在我的rails应用程序中，我使用客户端验证来显示错误消息。我想用我bootstrap.How可以改变我的代码，以便它显示工具提示上显示工具提示此消息.. 眼下的错误消息来自配置/初始化/ client_side_validation.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
    unless html_tag =~ /^<label/ 
    %{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe 
    else 
    %{<div class="field_with_errors">#{html_tag}</div>}.html_safe 
    end 
end 

请给任何建议。提前致谢。

Answer 1

这个工作对我来说：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
    unless html_tag =~ /^<label/ 
    %{<div class="field_with_errors">#{html_tag}<div class="tooltip-validate fade right in" style="display: block;"><div class="tooltip-validate-arrow"></div><div class="tooltip-validate-inner"><label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div></div></div>}.html_safe 
    else 
    %{<div class="field_with_errors">#{html_tag}</div>}.html_safe 
    end 

end 


# css 
.tooltip-validate { 
    position: absolute; 
    z-index: 1030; 
    display: inline; 
    padding: 5px; 
    font-size: 11px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    visibility: visible; 
} 

.tooltip-validate.in { 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
} 



.tooltip-validate.right { 
    margin-left: 227px; 
    margin-top: -43px; 
} 


.tooltip-validate-inner { 
    max-width: 350px; 
    padding: 3px 8px; 
    color: #ffffff; 
    text-align: center; 
    text-decoration: none; 
    background-color: #000000; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

.tooltip-validate-arrow { 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
} 


.tooltip-validate.right .tooltip-validate-arrow { 
    top: 50%; 
    left: 0; 
    margin-top: -5px; 
    border-right-color: #000000; 
    border-width: 5px 5px 5px 0; 
}