• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Contrata talento tech
    • Blog
    • Comercial
    • Calculadora de salario

0

410
Vistas
¿Cómo agregar la etiqueta dentro del "grupo de formularios" correcto en el formulario Ruby on Rails?

Estoy usando Rails 5.2 y tengo este sencillo formulario Rails y un campo para la dirección IP que se ve así:

 <%= bootstrap_form_for(@asset, :url => asset_path(@asset.id), :as => :asset, :method => :patch, :layout => :horizontal, :label_col => "col-md-3", :control_col => "col-md-4") do |f| %> <%= f.label :ip_address_locator, 'My NEW label', data: { "toggle"=> "tooltip", "placement"=>"bottom", :title => "This is a tooltip text" } %> <%= f.text_field :ip_address_locator %> <% end %>

Quiero actualizar la etiqueta predeterminada para:

Mi NUEVA etiqueta

pero por alguna razón, las etiquetas predeterminadas y nuevas aparecen al mismo tiempo.

y cuando inspecciono las etiquetas, parecen estar en diferentes divisiones.

¿Alguien sabe cómo mostrar solo 'Mi NUEVA etiqueta' y no ambas etiquetas?

  • Todavía quiero tener mi información sobre herramientas como se muestra en la imagen.

Por cierto, también pude actualizar mi etiqueta de esta manera:

 <%= f.text_field :ip_address_locator, :label => {:text => 'My NEW label'} %>

Pero luego ya no tengo acceso a mi información sobre herramientas.

  • Quiero poder actualizar el texto de mi etiqueta y poder ver mi información sobre herramientas al pasar el mouse sobre la etiqueta tal como lo tengo en mi imagen. Necesito ayuda por favor.
about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Debido a que está utilizando bootstrap_form_for builder, f.text_field genera una etiqueta de forma predeterminada. Puede eliminarlo con la opción skip_label . Y use su etiqueta personalizada en su lugar.

 <%= f.label :ip_address_locator, 'My NEW label', data: { "toggle"=> "tooltip", "placement"=>"bottom", :title => "This is a tooltip text" } %> <%= f.text_field :ip_address_locator, :skip_label => true %>

Sin embargo, la etiqueta personalizada ahora está fuera del contenedor del grupo de formularios. Si desea mantener el diseño sin cambios, debe envolver explícitamente la etiqueta y la entrada:

 <% f.form_group do %> <%= f.label :ip_address_locator, 'My NEW label', data: { "toggle"=> "tooltip", "placement"=>"bottom", :title => "This is a tooltip text" } %> <%= f.text_field :ip_address_locator, :skip_label => true, wrapper: false %> <% end %>

Como nota al margen, en un esfuerzo por ahorrarle trabajo adicional. Preferiría tener una pista que siempre esté visible si un campo requiere contexto adicional. La etiqueta ya tiene texto y la información sobre herramientas parece redundante. Si se usa en uno o dos lugares, creo que está bien. Pero también se estaría perdiendo todos los beneficios del generador de formularios; saltándose el envoltorio y la etiqueta. Solo obtendría una clase .form-control en su entrada del generador de formularios al hacer esto.

Actualización para bottstrap_form < 4.1.0 . Sin wrapper: false .

 <style> .form-group .form-group { margin-bottom: 0; } </style> <div class="form-group"> <%= f.label :ip_address_locator, 'My NEW label', class: "control-label col-md-3", data: { "toggle"=> "tooltip", "placement"=>"bottom", :title => "This is a tooltip text" } %> <div class="col-md-4" <%= f.text_field :ip_address_locator, layout: :none, :skip_label => true %> </div> </div>
about 4 years ago · Santiago Trujillo Denunciar

0

La forma más rápida sería agregar jQuery, que inicializará la información sobre herramientas.

 $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });

De esta manera, la información sobre herramientas aparecerá al pasar el mouse.

documentación de jQueryUI

Por supuesto, para usarlo, necesita jQuery gem o una etiqueta de secuencia de comandos dentro de <head> </head> . Pero lo mejor es usar la gema, la necesitarás mucho.

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda