javascript - 输入 : hover 上的 Bootstrap Popover

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>

我在 vendors/assets/javascripts 添加了 addclips.js 并且在我的 application.js 中添加了 //= require addclips.js

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

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

有人可以帮助我将所有内容组合在一起，并向我解释我必须包含的 Javascript 以使其正常工作，以供我输入吗？

Answer 1

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

标签输出应具有类似于此 fiddle 的 data- 属性:http://jsfiddle.net/chucknelson/me8Cb/

rails

<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();