如何在 Ruby on Rails 表单中的正确“表单组”中添加标签？答案

【问题标题】：How to add Label inside correct "form group" in Ruby on Rails form?如何在 Ruby on Rails 表单中的正确“表单组”中添加标签？
【发布时间】：2022-08-22 00:35:21
【问题描述】：

我正在使用 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 %>

我想更新默认标签：

我的新标签

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

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

如何只显示“我的新标签”而不是两个标签？

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

顺便说一句，我还能够像这样更新我的标签：
  <%= f.text_field :ip_address_locator, :label => {:text => \'My NEW label\'} %>
但后来我无法再访问我的工具提示了。

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

标签： javascript html ruby-on-rails ruby forms

【解决方案1】：

因为您使用的是bootstrap_form_for builder，所以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 类。

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

【讨论】：

你的解决方案不起作用。它创建了一个内部“表单组”部分。请查看我更新的问题，并附上我在使用您的修复程序后看到的图片。
我认为您在text_field 上缺少wrapper: false
Alex 是的，我在 text_field 上使用了 wrapper: false 但它不起作用
你安装了哪个版本的bootstrap_form？ wrapper: 选项仅适用于 v4.1.0
我正在使用版本 3

【解决方案2】：

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

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

这种方式工具提示将出现在悬停时。

jQueryUI documenation

当然，要使用它，您需要在 <head> </head> 中使用 jQuery gem 或脚本标签。但最好使用 gem，你会非常需要它。

【讨论】：

@yasyusha，我不需要查询工具提示。我已经有一个