CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrapsimple-formpopover
Mini John
Mini John

Reputation: 7941

Bootstrap Popover on Input : hover

I'm using simple form and trying to get the popover working for an Input.

The NEW form 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>

I added addclips.js to vendors/assets/javascripts and //= require addclips.js in my application.js

My addclips.js file looks like this:

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

Could someone help me combine everything together and explain me the Javascript i have to include to get this working, for my input?

Upvotes: 1

Views: 2897

Answers (1)

chucknelson
chucknelson

Reputation: 2336

I'm not entirely sure what you want to show in the popover, but getting it to trigger on hover for your input field will require some bootstrap data- attributes in the tag for the popover options, and one javascript method call.

The tag output should have data- attributes similar to this fiddle: 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>

JS w/ jQuery and Bootstrap

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

Upvotes: 3

Related Questions