Foundation 5、Simple Form 和 Rails - 如何让“提示”CSS 类正常工作

我已经搜索了几天并进行了实验，但我无法获得要显示的简单表单 gem 提示 CSS 类。这只是一个类，当您将鼠标悬停在表单输入上时显示表单输入的提示。

我正在使用 Rails 4.1 以及最新的 simple_form gem 和 Foundation 5。我已取消注释该行

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

CSS 显示了我已包含在包含在 Span class="hint" 中的表单中的提示，但我为该类提供的 CSS 并未应用。

其 CSS（实际上是 SCSS）是：

.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;
  }
}

样式丢失了，它只是被扔在那里什么也不做。

这是完整的 CSS，我怀疑有人会想看它，但万一有好心人！

<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>

如果您能对此提供帮助，非常感谢 - 我很感激它非常具体；）

我知道这个问题来自的项目现在已经死了（据@tentimes报道），但我有这个工作，并且有一些默认样式可能会在将来帮助其他人。

正如 @tentimes 和 @Thomas_Taylor 提到的，使用提供的生成器很重要，如下所示：

rails generate simple_form:install --foundation

然后取消注释以下行配置/初始化器/simple_form_foundation.rb

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

最后一步是提供您自己的 CSS（如 simple_form 中所述）文档 https://github.com/plataformatec/simple_form）。下面是我用过的。它使用来自 Foundation 的信息颜色 (#a0d3e8)全局样式 http://foundation.zurb.com/docs/components/global.html当鼠标悬停在带有提示的输入字段上时，会有很好的悬停效果。

# 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;
}