2016-03-04 1 views
2

Я создал issue on their github, но решил, что я попрошу об этом сообществе, так как он немного опирается на юниверс простой_формы.Компонент простой_формы tooltip на загрузочной группе загрузочной группы, не отображающей

Я успешно добавил загрузочные бутстрапы, используя 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'} % 

И вот вспомогательный файл всплывающей подсказки, добавленный в простой-из.

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) 

ответ

-1

Я не использовал самоцвета twitter-bootstrap, но, возможно, это может вам помочь.

Добавьте данные в список и заголовок для ввода 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" %> 

См также this post, чтобы помочь вам!

+0

это, похоже, не затрагивает вопрос, который конкретно связан с тем, как этот рельсовой камень выводит html. –

+0

Я уточнил, что я не использовал драгоценный камень. – aranhaqg