Html 标签旁边的简单形式问号，在悬停或单击-Ruby时显示引导工具提示

使用简单的表单gem和bootstrap，我试图找到一种方法——使用Ruby——在表单标签旁边添加一个问号形式的工具提示，在悬停或单击时显示提示。我正在努力寻找任何相关的信息来提供帮助

我需要在下面的标准表单输入中添加什么？我试过各种各样的方法，但似乎没有一种是接近的

<%= f.input :phone, placeholder: "Phone Number" %>

当我尝试以下操作时，不会显示输入字段：

<%= f.input :phone, placeholder: "Phone Number" do %>
    <span data-toggle='tooltip' title='We need your phone number because...'>?</span>
<% end %>

?

非常感谢

您可以添加

<span data-toggle='tooltip' title='<%= @your_tooltip_content %>'>?</span>

在CSS（例如，

app/assets/stylesheets/application.scss

）中，您可以添加：

.has-tip:after{
  font-family: "Glyphicons Halflings";
  content: " \e085";
  color: #aaaaaa;
}

基于simple_form wiki中提到的引导帮助程序，通过以下内容，我可以简单地添加如下工具提示：

<%= f.input :phone, placeholder: "Phone Number", tooltip: 'We need your phone number because...' %>

并将

config/initializers/simple\u form\u bootstrap.rb

文件更改为在每个

use:label

之后包含

use:tooltip

组件，如下所示：

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-default'
  config.boolean_label_class = nil

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'
    b.use :tooltip,  wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :readonly
    b.use :label, class: 'control-label'
    b.use :tooltip,  wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }

    b.use :input
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
  ... rest of file omitted for brevity...

并使用一点css来正确地隔开它：

span[data-toggle='tooltip'] {
  margin-left: .25em;
}

以及启动它所需的javascript：

$('[data-toggle="tooltip"]').tooltip();

---

效果很好。我使用的是bootstrap 3、rails 5和simple_form 4。

我尝试过这样使用：？但是它会使表单输入字段消失，有什么想法吗？不要把它放在块中。唯一的问题是，它把“？”放在输入字段下面，而不是放在标签旁边，这是我试图实现的。OK，我需要它可以点击，并且在悬停时显示得更快（似乎需要几秒钟）所以我需要继续努力，但让我开始吧。谢谢你的帮助！

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-default'
  config.boolean_label_class = nil

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'
    b.use :tooltip,  wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end

  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :readonly
    b.use :label, class: 'control-label'
    b.use :tooltip,  wrap_with: { tag: 'span', class: 'glyphicon glyphicon-question-sign text-muted' }

    b.use :input
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
  ... rest of file omitted for brevity...

span[data-toggle='tooltip'] {
  margin-left: .25em;
}

$('[data-toggle="tooltip"]').tooltip();