CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
RGR
RGR

Reputation: 1571

Dropdown in popover bootstrap

I am not able to figure out how to display dropdown in popover in bootstrap. All i can find tutorials are just displaying just text and buttons. I need to display dropdown and also have to bind data in it. To display buttons and for its events i have followed the below way.

 var popOpts = {
        placement: 'left',
        title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
        html: 'true',
        trigger: 'click',
        content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
    }
    $(".btnDelete").popover(popOpts);

I need to know how to display dropdown and to bind items in popover in bootstrap.

Upvotes: 0

Views: 8519

Answers (1)

Sridhar R
Sridhar R

Reputation: 20408

Try like this

You can display anything inside form,and bind the events

HTML

<div class="popover-markup"> <a href="#" class="trigger">Popover link</a> 
    <div class="head hide">Lorem Ipsum</div>
    <div class="content hide">
        <div class="form-group">
            <select><option>Test</option></select>
        </div>
        <button type="submit" class="btn btn-default btn-block">Submit</button>
    </div>
    <div class="footer hide">test</div>
</div>

Script

$('.popover-markup>.trigger').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
});

DEMO

Upvotes: 1

Related Questions