Cómo usar Twitter-Bootstrap hover popover con Rails

Question

Soy un novato con rieles, quiero usar el popover flotante de Twitter-Bootstrap en mi aplicación Rails. Tengo la siguiente parte:

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

Si el cursor del usuario en la etiqueta :first_name, aparecerá un mensaje diciendo algo de él. Pero no sé dónde poner cosas en mi aplicación como la referencia de archivos js o la función.

yo probamos este example y poner el javascript_include_tag en el diseño/application.html.erb

Pero parece que yo no sé cómo funciona. Entonces necesito una descripción detallada sobre cómo usarlo.

Answer 1

Hay several * Rails * Bootstrap * proyectos que puede utilizar para integrar Bootstrap.

Si prefiere hacerlo de forma manual, una opción es colocar los archivos (incluyendo los plugins que desea utilizar, que en su caso sería bootstrap-tooltip.js y bootstrap-popover.js) en /vendor/assets/javascripts e incluirlos en su application.js así:

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

hacer lo mismo con el archivo CSS bootstrap.css dejándolo caer dentro /vendor/assets/stylesheets e incluirlo en /app/assets/stylesheets/application.css añadiendo esta línea a continuación *= require_self:

*= require bootstrap 

Personalmente, prefiero usar el archivo completo bootstrap.css en lugar del bootstrap-min minimizado porque de vez en cuando quiero explorar la fuente. De cualquier manera, cuando implemente en producción, el CSS será minimizado por Rails automáticamente a través de la canalización de activos.

---

Una vez que haya Bootstrap cargado, puede utilizar el siguiente fragmento de inicializar el plugin popover en el elemento de su elección:

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

puede colocar el fragmento anterior en la parte inferior de su application.js pero la forma recomendada es colocarla en el archivo .coffee que es correspondiente al andamio que está trabajando, por ejemplo users.js.coffee

Y, por último ..

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

    ... 

Answer 2

que añade un ayudante popover usando algo como:

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 

En su opinión, puede usar las JS:

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

Junto con su ayudante:

= popover(:model, :attribute) 

Este es siempre que tenga bootstrap ya cargado, así como jquery. Usted puede subcontratar el i18n con texto codificado si lo desea.