Question

我创建了一个issue on their github，但我认为我会问这个社区，因为它偏离了simple_form世界。

我已使用their wiki instructions成功添加了引导程序自定义包装器。

我还按照these instructions向这些组件添加了工具提示助手。略微修改以使用翻译文件。见下文。

然而，问题是工具提示仅在没有使用config.wrappers :horizontal_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.use :label, class: 'col-sm-4 control-label' b.use :tooltip b.wrapper tag: 'div', class: 'col-sm-8' do |ba| ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append| append.use :input, class: 'form-control' end ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } end end时才起作用。似乎包装器上设置的属性不会传播到内部的输入？

有没有其他人看过这个或得到这个？以下是重点。

以下是我使用工具提示定义自定义包装器的方法。

= f.input :peak_visibility, wrapper: :horizontal_input_group, label: 'Peak Audience Visibility' do
  = f.input_field :peak_visibility, class: 'form-control' 
  %span{class: 'input-group-addon'} %

以下是我在表格中的称呼方式。

module SimpleForm
  module Components
    module Tooltips
      def tooltip(wrapper_options = nil)
        unless tooltip_text.nil?
          input_html_options[:rel] ||= 'tooltip'
          input_html_options['data-toggle'] ||= 'tooltip'
          input_html_options['data-placement'] ||= tooltip_position
          input_html_options['data-trigger'] ||= 'focus'
          input_html_options['data-original-title'] ||= tooltip_text
          nil
        end
      end

      def tooltip_text
        tooltip = options[:tooltip]
        if tooltip.is_a?(String)
          tooltip
        elsif tooltip.is_a?(Array)
          tooltip[1]
        else
          nil
        end
      end

      def tooltip_position
        tooltip = options[:tooltip]
        tooltip.is_a?(Array) ? tooltip[0] : "right"
      end
    end
  end
end

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

这是我添加到simple-from的工具提示帮助文件。

system('echo ${ip}')

Answer 1

我没有使用twitter-bootstrap gem，但也许这可以帮到你。

在您的html输入和视图中的相应脚本中添加数据切换和标题。

例如：

<label data-original-title="Very Good" for="evaluation" data-toggle="tooltip" data-placement="bottom" title=""></label>

<script type="text/javascript">
      $(document).ready(function(){
        $("[data-toggle='tooltip']").tooltip();
      });
</script>

您还可以将标签/输入轨道助手与数据和标题args一起使用：

<%= f.label :evaluation, "Evaluation:", data: {toggle: "tooltip", placement: "bottom" }, title: "Very Good" %>

另请参阅this post以帮助您！

bootstrap输入组包装器上的simple_form工具提示组件未显示

1 个答案: