Question

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

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

= 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.'

欢迎任何建议！：）

Answer 1

我调查了它并最终实现了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之外的任何东西，让某人有机会拿起它并向我展示它是如何做得很好的。

PPS：我的例子基于最近的基金会6。

基础5和SimpleForm的工具提示

1 个答案: