Как использовать Twitter-Bootstrap hover popover с Rails

Question

Я новичок с рельсами, я хочу использовать всплывающую подсказку Twitter-Bootstrap в моем приложении rails. У меня есть следующая часть:

<div class="field">
    <%= f.label :first_name, {:class => 'label'}%>&nbsp;
    <%= f.text_field :first_name ,{:class => 'span3',}%>
</div>

Если пользователь наведет курсор на метку :first_name, появится сообщение, сообщающее ему что-то. Но я не знаю, куда поместить в моем приложении такие вещи, как ссылки на файлы js или функцию.

Я попробовал этот пример и поместил javascript_include_tag в layout / application.html.erb

Но, похоже, я не знаю, как это работает. Поэтому мне нужно подробное описание того, как его использовать.

Answer 1

Есть несколько * Rails * Bootstrap * проектов, которые вы можете использовать для интеграции Bootstrap.

Если вы предпочитаете это сделатьвручную, одним из вариантов является размещение файлов (включая любые плагины, которые вы хотите использовать, которые в вашем случае будут bootstrap-tooltip.js и bootstrap-popover.js) в /vendor/assets/javascripts и включение их в application.js, например, так:

//= require bootstrap-min.js
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js

Сделайте то же самое с CSS-файлом bootstrap.css, поместив его в /vendor/assets/stylesheets и включив в /app/assets/stylesheets/application.css, добавив эту строку ниже *= require_self:

*= require bootstrap

Я личноЯ предпочитаю использовать полный bootstrap.css файл вместо уменьшенного bootstrap-min, потому что я иногда хочу просмотреть источник.В любом случае, при развертывании в рабочей среде CSS будет минимизирован с помощью Rails автоматически через конвейер ресурсов.

---

После загрузки Bootstrap вы можете использовать следующий фрагмент для инициализации плагина popover наэлемент по вашему выбору:

$('.label-with-popover').popover(placement: 'right') # Note: 'right' is default

Вы можете разместить вышеупомянутый фрагмент внизу вашего application.js, но рекомендуемый способ - поместить его в файл .coffee, соответствующий вашей эшафотработая, например, с users.js.coffee

и наконец ..

  <label class="label-with-popover"
         data-content="popover content"
         data-title="popover title">

  ...

Answer 2

Я добавил всплывающую подсказку, используя что-то вроде:

module PopoverHelper
  def popover(model_name, attribute)
    i18n_base = "simple_form.popovers.#{model_name.downcase}.#{attribute}"

    content_tag(:i, '', class: "icon-question-sign",
                        id: "#{attribute}_help",
                        title: I18n.t("#{i18n_base}.title"),
                        data: {
                            # don't use popover as it conflicts with the actual pop-over thingy
                            pop_over: true,
                            content: I18n.t("#{i18n_base}.text")
                        })
  end
end

По вашему мнению, вы можете запустить js:

$("[data-pop-over]").popover({placement: 'right'});

Вместе со своим помощником:

= popover(:model, :attribute)

Это при условии, что у вас уже есть загруженный загрузчик, а также jquery. Вы можете заменить i18n жестко закодированным текстом, если хотите.