简单形式标签旁边的问号,用于在悬停或单击期间显示引导工具提示 - Ruby

Dan*_*Rio 7 html ruby simple-form twitter-bootstrap

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

我需要在下面的标准表单输入中添加什么?我尝试过很多事情,但似乎没有什么是接近的。

<%= f.input :phone, placeholder: "Phone Number" %>
Run Code Online (Sandbox Code Playgroud)

当我尝试以下操作时,不显示输入字段:

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

非常感谢

Eri*_*nil 4

你可以添加

<span data-toggle='tooltip' title='<%= @your_tooltip_content %>'>?</span>
Run Code Online (Sandbox Code Playgroud)

任何你需要的地方。例如 :

<%= f.input :phone, placeholder: "Phone Number"%>
<span data-toggle='tooltip' title='We need your phone number because...'>?</span>
Run Code Online (Sandbox Code Playgroud)

编辑:

?这是我能在同一行上显示工具提示的最好方法:

  <%= f.input :phone, label_html: { "data-tooltip" => true, :class => "has-tip", :title => "We need your phone number because..."} %>
Run Code Online (Sandbox Code Playgroud)

在你的CSS(例如app/assets/stylesheets/application.scss)中,你可以添加:

.has-tip:after{
  font-family: "Glyphicons Halflings";
  content: " \e085";
  color: #aaaaaa;
}
Run Code Online (Sandbox Code Playgroud)