我在他们的github上创建了一个问题,但我想我会问这个社区,因为它有点偏向于simple_form宇宙。
我已经使用他们的 wiki 说明成功添加了引导自定义包装器。
我还按照这些说明将工具提示帮助程序添加到这些组件中。稍作修改以使用翻译文件。见下文。
但是,问题在于工具提示仅在没有使用input-group
时才有效。包装器上设置的属性似乎没有向下传播到内部的输入?
有没有人看到过这个或绕过这个?以下是重要的部分。
以下是我如何使用工具提示定义自定义包装器。
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)
我没有使用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>
您还可以将标签/输入栏帮助程序与数据和标题参数一起使用:
<%= f.label :evaluation, "Evaluation:", data: {toggle: "tooltip", placement: "bottom" }, title: "Very Good" %>
另请参阅这篇文章来帮助您!