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

user_5245070 0
Viewed 292

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.
forms ruby-on-rails ruby html javascript
2 Answers

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

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.

user_68847000
Related