Rails simple_form, move hint before input

Question

Is there anyway to move the hint component so it appears before the input?

The components currently appear, in the following order: label, input, hint, error. I've tried adding the :components option but that is not working.

Here's my code:

<%= f.input :content, 
            :components => [:label, :hint, :input], 
            :as => :text, 
            hint: 'Please 1) include your exact copy here, 2) upload your copy document in the next step, or 3) describe any content services to include in our estimate.', 
            required: true, 
            :label => "Copy" %>

Answer 1

You can modify the Inputs section default wrapper in config/initializers/simple_form.rb, from:

b.use :label_input
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }

to:

b.use :label
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
b.use :input

This section starts at line 42 in the default generated simple_form.rb

This will make individual checkboxes look a little odd when they have errors, so you will also want to make a version of the wrapper that is a duplicate of the original config and set it up just for use with the boolean input type. For example:

config.wrappers :checks, class: :input,
    hint_class: :field_with_hint, error_class: :field_with_errors do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly

    ## Inputs
    b.use :label_input
    b.use :hint,  wrap_with: { tag: :span, class: :hint }
    b.use :error, wrap_with: { tag: :span, class: :error }
end
config.wrapper_mappings = { boolean: :checks }

Answer 2

I think you can just omit the hint from the input_field and use the hinthelper by itself. See excerpt from simple_form docs:

Simple Form also allows you to use label, hint, input_field, error and full_error helpers (please take a look at the rdocs for each method for more info):

<%= simple_form_for @user do |f| %>
  <%= f.label :username %>
  <%= f.input_field :username %>
  <%= f.hint 'No special characters, please!' %>
  <%= f.error :username, id: 'user_name_error' %>
  <%= f.full_error :token %>
  <%= f.submit 'Save' %>
<% end %>