Bootstrap Popover : How to Create Awesome Dropdown

In this tutorial i will describe how to use bootstrap popover for custom HTML control, normally we used popover for display tooltip information on help, but sometimes we need to HTML control or html form in popover. This tutorial help you to create HTML control on popover.

Also Checkout other Popup Box tutorial,

popover-dropdown

Simple Steps to Create HTML control With in Bootstrap Popover

Step 1: Include all nessesacry library.

Select Code
1
2
3
4
<link rel="stylesheet" href="/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="/jquery/1.11.1/jquery.min.js"></script>
<script src="/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Step 1: We need to define HTML layout.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="popover1" class="col-sm-12 col-xs-12 col-md-9">
        <a title="" class="btn btn-primary change-trigger" href="javascript:;" data-original-title="popover Test" >Popover Example</a>        
      <div class="hide" id="select-div">
            <div class="col-sm-2 "  style="width:250px;">
            <select class="form-control">
            <option>Test</option>
            <option>Test1</option></select>
            </div>
        
            <div class="clearfix col-sm-10" style="margin:8px 0;">
              <button type="button" class="btn btn-default btn-go">Go!</button>
              <button type="button" class="btn btn-default btn-cancel-option">Cancel</button>
            </div>
    </div>
    </div>

above code create a link button which will use to generate popover on click. We have HTML select control with hide properties.

Step 2: Now we will call bootstrap popover method.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$('.change-trigger').popover({
            placement : 'Right',
            title : 'Change',
            trigger : 'click',
            html : true,
            content : function(){
                var content = '';
                content = $('#select-div').html();
                return content;
            } 
        }).on('shown.bs.popover', function(){
        });

        $(document).delegate('.btn-go','click', function(e){
            e.preventDefault();
            alert('Go Click');
        });

        $(document).delegate('.btn-cancel-option', 'click', function(e){
            e.preventDefault();
            var element = $(this).parents('.popover');
            if(element.size()){
                $(element).removeClass('in').addClass('out');
            }
        });

Live Demo and Download Source Code

  • anil

    Hi Parvez
    I am trying to place a drop down in body of popover and depending on selected value in dropdown I want to show data related to that selected option in the same body of the popover how can I achieve this……..

    • You can call ajax request to fill data in your body based on dropdown id.