Bootstrap Popover on Input : hover

Bootstrap Popover on Input : hover

本文关键字：hover Input on Popover Bootstrap      更新时间：2023-09-26

我使用的是简单的表单，并试图让popover为Input工作。

新表单输入：

<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>

我将addclips.js添加到供应商/assets/javascript中，并在我的application.js 中添加了//= require addclips.js

我的addclips.js文件如下：

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

有人能帮我把所有的东西组合在一起，并向我解释我必须包含的Javascript才能让它发挥作用吗？

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

标签输出应该具有类似于此fiddle的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和引导

$('#login-form-selector').popover();
相关文章：