How to add Label inside correct "form group" in ruby on Rails form?-CodePudding

The

and when I inspect the labels they seem to be in different divs. Please see image:

Does anybody know how to only show 'My NEW label' and not both labels?

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

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

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. Need help please.

CodePudding user response：

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.

CodePudding user response：

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.