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

标签 html ruby twitter-bootstrap simple-form

使用 Simple Form 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>

任何你需要的地方。例如 :
<%= f.input :phone, placeholder: "Phone Number"%>
<span data-toggle='tooltip' title='We need your phone number because...'>?</span>

编辑:

这是我能做的最好的显示?工具提示在同一行:
  <%= f.input :phone, label_html: { "data-tooltip" => true, :class => "has-tip", :title => "We need your phone number because..."} %>

在您的 CSS(例如 app/assets/stylesheets/application.scss )中,您可以添加:
.has-tip:after{
  font-family: "Glyphicons Halflings";
  content: " \e085";
  color: #aaaaaa;
}

关于html - 标签旁边的简单形式问号,在悬停或单击期间显示 Bootstrap 工具提示 - Ruby,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40784555/

相关文章:

javascript - jQuery 在最后一个元素之后插入

html - 表格宽度超出了 div 边框

javascript - 在 chrome 中打印 div,css 不起作用

css - Bootstrap : Class for margin-right?

javascript - Bootstrap 可扩展侧边栏元素

javascript - Bootstrap 模态和徽章

php - 使用正则表达式固定某些元素的宽度

Ruby:如何使用 dup/clone 来不改变原始实例变量?

html - Rails 如何将参数从 Controller 传递到模型内部的 after_save

ruby - Rails 3 + regex - 替换字符串的一部分,出现 1 次