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.
Does anybody know how to only show 'My NEW label' and not both labels?
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 anymore.
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>
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.
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.