输入时的引导弹出窗口：悬停

Question

我正在使用简单的表单并尝试让弹出框为输入工作。

新表单输入：

<p>
          <%= f.input :title, input_html: { class: 'login-form-block',
                                            id: "login-form-selector",
                                            data: { :toggle => 'popover',
                                                    :trigger => 'hover',
                                                    :content => 'Some popover content' }},
                      :autofocus=>true, label: false, placeholder: "Title",
                      :hint => "Enter a Title for your Clip" %>
        </p>

我在我的 application.js 中添加了 addclips.js 到 vendor/assets/javascripts 和 //= require addclips.js

我的 addclips.js 文件如下所示：

$('#login-form-selector').popover()

有人可以帮我将所有内容组合在一起，并解释我必须包含的 Javascript 以供我输入吗？

Answer 1

我不完全确定你想在弹出窗口中显示什么，但是让它在悬停时触发你的输入字段需要一些引导 data- 在弹出窗口选项标签中的属性，以及一个 javascript 方法调用.

标签输出应该有类似于这个小提琴的data-属性：http://jsfiddle.net/chucknelson/me8Cb/

导轨

<p>
    <%= f.input :title, input_html: { class: 'login-form-block', id: 'login-form-selector', data-toggle: 'popover', data-trigger: 'hover', data-content: 'Some popover content' },
                :autofocus=>true, label: false, placeholder: "Title",
                :hint => "Enter a Title for your Clip" %>
</p>

带有 jQ​​uery 和 Bootstrap 的 JS

$('#login-form-selector').popover();