Bootstrap Snippet Popovers form selects using HTML CSS Bootstrap jQuery

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
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-4">
              <div class="po-markup">
                <a href="#" class="btn btn-lg btn-success po-link">Click</a> ←  Here
                <div class="po-content hidden">
                    <div class="po-title">
                        Wed June 25, 2014
                    </div> <!-- ./po-title -->
            
                    <div class="po-body">
                        <form class="form-group">
                            <select class="form-control">
                              <option>Select a physician</option>
                              <option>Doe, John</option>
                              <option>Jones, Jane</option>
                              <option>Marshall, Penny</option>
                              <option>Sherman, Cindy</option>
                              <option>Truman, Laverne</option>
                            </select>
                        </form>
                        <div class="doctor-list ">
                            <div class="doc-color-green">
                                <div style="padding: 10px">
                                <a href="#"></a> Doe, John
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 0px">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
26
27
28
29
30
31
32
body{
            margin-top:300px;    
            font-family: 'Roboto', sans-serif;
            }
          .borderline {
                border-bottom: 5px solid #e6e6e6; 
                width: 100%;
            }
            .doctor-list{ 
                width: 100%; 
                background-color: #F2F2F2; 
                margin: 10px 0;      
            }
            .doc-color-green {
                border-left: 10px solid #22D475;
            }
            .doc-color-blue {
                border-left: 10px solid #4FD2E3;
            }
            .doc-color-yellow {
                border-left: 10px solid #F7DE1B;
            }
            .doc-color-orange {
                border-left: 10px solid #FFAB3D;
            }
            .doc-color-purple {
                border-left: 10px solid #CC65E0;
            }
          .popover {min-width: 27%;}
          .btn-default { background-color: #dbdbdb; box-shadow: 0px 3px #ccc; }
          .btn-primary { background-color: #005596; box-shadow: 0px 3px #005596;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
            $('.po-markup > .po-link').popover({
            trigger: 'click',
            html: true,  // must have if HTML is contained in popover
            // get the title and conent
            title: function() {
                return $(this).parent().find('.po-title').html();
            },
            content: function() {
                return $(this).parent().find('.po-body').html();
            },
            container: 'body',
            placement: 'left'
            });
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Popovers form selects"
Bootstrap 3.2.0 Snippet by shopnil786

Related: See More

Questions / Comments:

"Popovers form selects" Bootstrap 3.2.0 Snippet by shopnil786

Related: See More

Questions / Comments:

"Popovers form selects"
Bootstrap 3.2.0 Snippet by shopnil786