Solution 1 :

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.

  .form-group .form-group { margin-bottom: 0; }
<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 %>

Solution 2 :

Fastest way would be to add jQuery, that will initialize the 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.

Problem :

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(,
                   :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.


Comment posted by Devmix

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.

Comment posted by Alex

I think you’re missing

Comment posted by Devmix

Alex yes I’m using wrapper: false on the text_field but it doesn’t work

Comment posted by Alex

what version of

Comment posted by Devmix

Im using version 3

Comment posted by Devmix

@yasyusha, I don’t need a query tooltip. I already have one