Bootstrap 3.0 Popover Sample

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<p>Click on button to see Popover</p>

<a href="#" id="example" class="btn btn-primary" rel="popover"

   data-original-title="My scrollable popover">pop
</a>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
                About this SO Question: <a href='http://stackoverflow.com/q/19498770/1366033'>Twitter Bootstrap Popover error</a><br/>
    Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3.0</a>
    <br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
    <div>

CSS

#example {
    margin-top: 100px;
    left: 200px;
}  

.scrollable {
        max-height: 200px;
        overflow: auto;
    }

.scrollable::-webkit-scrollbar {
    display:none;
} 

/* .parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.scrollable{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 15px; Increase this value for cross-browser compatibility
} */

JavaScript

$(function () {
    $('#example').popover({
                trigger : 'click',  
            placement : 'right', 
            html: 'true', 
            content : '<div class="parent"><ul><li>Fixed header</li></ul><ul class="scrollable"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li></ul></div>',
         
        });
});