Question

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

新表单输入：

<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

我不完全确定你想要在popover中显示什么，但是让它在你的输入字段悬停时触发将需要标签中的一些bootstrap data-属性用于popover选项，以及一个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>

JS w / jQuery和Bootstrap

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

输入上的Bootstrap Popover：悬停

1 个答案: