simple_form工具提示組件在自舉輸入組包裝沒有顯示

我創建了issue on their github但我想問我這個社區，因爲它傾向於simple_form宇宙的一小部分。simple_form工具提示組件在自舉輸入組包裝沒有顯示

我已經成功地使用their wiki instructions添加了引導程序自定義包裝。

我還通過以下these instructions向這些組件添加了工具提示助手。稍作修改以使用翻譯文件。見下文。

但是，問題在於僅當沒有使用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'} %

這裏是我添加到simple-from的工具提示助手文件。

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)

來源

2016-03-04 Luke Ollett

-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爲您服務！

來源

2016-06-16 12:42:50 aranhaqg

這似乎並沒有解決這個問題，這是專門做這個軌道寶石如何輸出的HTML。 –

我更新了指定我沒有使用寶石。 – aranhaqg

simple_form工具提示組件在自舉輸入組包裝沒有顯示

回答

相關問題