How to add Label inside correct "form group" in Ruby on Rails form?

Question

I'm using Rails 5.2 and have this simple rails form and a field for the IP address that looks like this:

<%= 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 %>

I want to update the default label for:

My NEW label

but for some reason the default and new labels show up at the same time.

and when I inspect the labels they seem to be in different divs.

How to only show 'My NEW label' and not both labels?

I still want to have my tooltip as show on the picture.

By the way I was also able to update my label like this:

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

But then I don't have access to my tooltip any more.

I want to be able to update my label text and be able to see my tooltip when hovering on the label just like I have it on my picture.

Alex · Accepted Answer · 2022-03-28 17:31:08Z

Because you're using bootstrap_form_for builder, f.text_field outputs a label by default. You can remove it with skip_label option. And use your custom label instead.

<%= 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 %>

However the custom label is now outside of the form group wrapper. If you want to keep the layout unchanged you should explicitly wrap the label and the input:

<% 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 %>

As a side note, in an effort to spare you extra work. I'd prefer to have a hint that's always visible if a field requires extra context. Label already has text in it and a tooltip seems redundant. If used in one or two places, I think it's fine. But you would be missing all the benefits of the form builder as well; skipping wrapper and label. You would only get a .form-control class on your input from the form builder by doing this.

Update for bottstrap_form< 4.1.0. No wrapper: false option.

<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>

your solution doesn't work. It creates an inner 'form-group' section. Please see my updated question with a picture of what I see after using your fix. — Devmix, CommentedMar 28, 2022 at 14:44
Alex yes I'm using wrapper: false on the text_field but it doesn't work — Devmix, CommentedMar 28, 2022 at 15:59
what version of bootstrap_form you have installed? wrapper: option only works from v4.1.0 — Alex, CommentedMar 28, 2022 at 16:04

yayusha · Accepted Answer · 2022-03-26 14:54:23Z

Fastest way would be to add jQuery, that will initialize the tooltip.

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

This way tooltip will appear on hover.

jQueryUI documenation

Of course in order to use it you need jQuery gem or script tag inside of <head></head>. But it's best to use the gem, you will need it a lot.

@yasyusha, I don't need a query tooltip. I already have one
– Devmix
CommentedMar 27, 2022 at 7:20 — Devmix, CommentedMar 27, 2022 at 7:20

Collectives™ on Stack Overflow

How to add Label inside correct "form group" in Ruby on Rails form?

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related