如何在 Rails 表单的 ruby 中正确的 "form group" 中添加标签？

Question

我正在使用 Rails 5.2，并且有这个简单的 rails 表单和一个 IP 地址字段，如下所示：

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

我想更新默认标签：

My NEW label

但由于某种原因，默认标签和新标签同时出现。

当我检查标签时，它们似乎位于不同的 div 中。

有人知道如何只显示 'My NEW label' 而不是两个标签吗？

我仍然希望我的工具提示如图所示。

顺便说一下，我还可以像这样更新我的标签：

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

但是我无法再访问我的工具提示了。

我希望能够更新我的标签文本，并且能够在将鼠标悬停在标签上时看到我的工具提示，就像在我的照片上一样。需要帮助。

Answer 1

最快的方法是添加 jQuery，这将初始化工具提示。

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

这样悬停时会出现工具提示。

jQueryUI documenation

当然，为了使用它，您需要 jQuery gem 或 <head> </head> 内的脚本标记。不过最好用gem，你会经常用到的

Answer 2

因为您使用的是 bootstrap_form_for 生成器，f.text_field 默认输出一个标签。您可以使用 skip_label 选项将其删除。并改用您的自定义标签。

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

但是，自定义标签现在位于表单组包装器之外。如果你想保持布局不变，你应该显式包装标签和输入：

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

作为旁注，努力为您节省额外的工作。如果某个字段需要额外的上下文，我更希望有一个始终可见的提示。标签中已经有文本，工具提示似乎是多余的。如果用在一两个地方，我觉得还可以。但是您也会错过表单生成器的所有好处；跳过包装纸和标签。通过这样做，您只会在表单生成器的输入中得到 .form-control class。

更新 bottstrap_form < 4.1.0。没有 wrapper: false 选项。

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

如何在 Rails 表单的 ruby 中正确的 "form group" 中添加标签？

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

html

javascript

ruby

forms

ruby-on-rails