Foundation 5, Simple Form and Rails - how to get 'hints' CSS class working

Question

I have been searching for days and experimenting, but I am unable to get the Simple Form gem hints CSS class to show. This is simply a class to show a hint for a form input when you hover over it.

I am using Rails 4.1 with the latest simple_form gem and foundation 5. I have uncommented the line

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

The CSS shows the hint that I have included in the form wrapped in a Span class="hint", but the CSS I have provided for the class is not applied.

The CSS for this (actually it's SCSS) is:

.simple_form {
  .error {
    clear: left;
    color: black;
    display: block;
    margin-left: 120px;
  }
  .hint {
    clear: left;
    margin-left: 120px;
    color: #555;
    display: block;
    font-style: italic;
  }
}

The styling is missing and it is just plonked there doing nothing.

Here is the full CSS, I doubt anyone would want to look through it, but in case there is a kind soul out there!

<main role="main">

       <h2>Sign up</h2>
<div class="form">
<form accept-charset="UTF-8" action="/users" class="simple_form new_user" id="new_user" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p1yBwcId1CbmOJChdVQQht+OafY8aX+7i0U71SxdSbc=" /></div>


      <div class="form-inputs">
        <div class="input string required user_first_name"><label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label><input autofocus="autofocus" class="string required" id="user_first_name" name="user[first_name]" type="text" /></div>
        <div class="input string required user_last_name"><label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label><input class="string required" id="user_last_name" name="user[last_name]" type="text" /></div>
        <div class="input email required user_email"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><input class="string email required" id="user_email" name="user[email]" type="email" value="" /></div>
        <div class="input string required user_staff_id"><label class="string required control-label" for="user_staff_id"><abbr title="required">*</abbr> Staff ID</label><input class="string required" id="user_staff_id" name="user[staff_id]" type="text" /></div>
        <div class="input string required user_mobile"><label class="string required control-label" for="user_mobile"><abbr title="required">*</abbr> Mobile (with international dialing code. E.g. 07931xxxxxx = 447931xxxxxx)</label><input class="string required" id="user_mobile" name="user[mobile]" type="text" /></div>
        <div class="input password required user_password"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><input class="password required" id="user_password" name="user[password]" type="password" /></div>
        <div class="input password required user_password_confirmation"><label class="password required control-label" for="user_password_confirmation"><abbr title="required">*</abbr> Password confirmation</label><input class="password required" id="user_password_confirmation" name="user[password_confirmation]" type="password" /></div>
        <div class="input string required user_pin field_with_hint"><label class="string required control-label" for="user_pin"><abbr title="required">*</abbr> 4 digit PIN</label><input class="string required" id="user_pin" name="user[pin]" type="text" /><span class="hint">Type a number in here</span></div>
        <div class="input string required user_pin_confirm field_with_hint"><label class="string required control-label" for="user_pin_confirm"><abbr title="required">*</abbr> Confirm PIN</label><input class="string required" id="user_pin_confirm" name="user[pin_confirm]" type="text" /><span class="hint">And the same number again</span></div>
      </div>

      <div class="form-actions">
        <input class="button" name="commit" type="submit" value="Sign up" />
      </div>
    </form>

Thanks very much if you can help with this - I appreciate it is extremely specific ;)

Answer 1

I know the project this question came from is dead now (as reported by @tentimes), but I have this working and have some default styles that may help others in the future.

As both @tentimes and @Thomas_Taylor mentioned, it is important to use the provided generator, like so:

rails generate simple_form:install --foundation

and then to un-comment the following line from config/initializers/simple_form_foundation.rb

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

The final step is providing your own CSS (as mentioned in the simple_form documentation). Below is what I used. It uses the info color (#a0d3e8) from the Foundation global styles and has a nice hover effect when the input field with the hint is moused over.

# in framework_and_overrides.css.scss

.simple_form .field_with_hint input{
  margin-bottom: 0;
  &:hover~.hint{
    display: block;
  }
}

.simple_form .hint {
  display: none;
  padding: 0.375rem 0.5625rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: normal;
  font-style: italic;
  background: #a0d3e8;
  color: white;
}

Answer 2

When you ran the simple form generator did you add --foundation at the end? Documentation (https://github.com/plataformatec/simple_form) reads:

To generate wrappers that are compatible with Zurb Foundation 5, pass the foundation option to the generator, like this:

rails generate simple_form:install --foundation

Did you also do the below:

Please note that the Foundation wrapper does not support the :hint option by default. In order to enable hints, please uncomment the appropriate line in config/initializers/simple_form_foundation.rb. You will need to provide your own CSS styles for hints.

Hope that helps.