0

我将 SimpleForm 与 Zurb Foundation 5 一起使用（设置如https://github.com/plataformatec/simple_form#zurb-foundation-5中所述）。

在我看来，我可以通过以下方式为表单字段显示 Foundation 工具提示（例如“输入您的姓名”）：

= f.input :name, input_html: {title: 'Type your name.', data: {tooltip: ''}}

这很好，但语法开销太大。如何配置 SimpleForm 以便我可以在视图中使用以下简短语法来显示 Foundation 工具提示：

= f.input :name, hint: 'Type your name.'

（我已经阅读了https://stackoverflow.com/a/28461799/4096216但这无济于事，因为我不想要自定义工具提示，但我更喜欢使用 Foundation 本身提供的工具提示，请参阅http ://foundation.zurb.com/docs/components/tooltips.html）。

作为一种解决方法，我写了一个视图助手

def hint(text)
  {input_html: {title: text, data: {tooltip: ''}}}
end

这允许我显示一个工具提示：

= f.input :name, hint('Type your name.')

不过，如果我能写的话，感觉会更好/更干净：

= f.input :name, hint: 'Type your name.'

欢迎任何建议！:)

4

1 回答 1

0

我研究了它并最终实现了一个自定义组件，如SimpleForm wiki中简要描述的那样。

在config/initializers/simple_form_foundation.rb我添加

module SimpleForm
  module Components
    module Tooltips
      def tooltip(wrapper_options=nil)
        @tooltip ||= begin
          hint = options[:hint]

          text =
            if hint.is_a?(String)
              html_escape(hint)
            else
              translate_from_namespace(:hints)
            end

          if text
            <<-HTML
              <span data-tooltip
                aria-haspopup='true'
                class='has-tip'
                data-disable-hover='false'
                tabindex=1
                title='#{text}'>?</span>
            HTML
          end
        end
      end

      def has_tooltip?
        options[:hint] != false && tooltip.present?
      end
    end
  end
end

SimpleForm::Inputs::Base.send(:include, SimpleForm::Components::Tooltips)

然后我可以在同一个文件的设置部分中使用它（为简洁起见省略了一些代码）：

SimpleForm.setup do |config|
  ...
  config.wrappers :vertical_form, ... do |b|
    ...
    b.use :tooltip
  end
...

PS：我没有费心使用 SimpleForm 的构建器来返回除了 HTML 的 blob 之外的任何东西，让别人有机会拿起它并向我展示如何很好地完成它。

PPS：我的例子是基于最近的 Foundation 6。

于 2016-02-11T11:29:32.610 回答