Bootstrap 3.0 Popover Sample

by mamounothman

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">
<a href="#" id="open" class="btn btn-primary" rel="popover" data-message="Message">open modal</a>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#" id="popover1" class="btn btn-primary" rel="popover" data-message="Message">popover sticking when scroll down</a>
<div>

</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModal-label">Modal title</h4>
                </div>
                <div class="modal-body" style="height:200px;    overflow: scroll;">
<a href="#" id="popover2" class="btn btn-primary" rel="popover" data-message="Message">popover not sticking when scroll down
</a>
<div>
The width() method sets or returns the width of an element (excludes padding, border and margin).

The height() method sets or returns the height of an element (excludes padding, border and margin).

The following example returns the width and height of a specified <div> element:The width() method sets or returns the width of an element (excludes padding, border and margin).

The height() method sets or returns the height of an element (excludes padding, border and margin).

The following example returns the width and...

CSS

.popover{
  z-index:9999;
}

#popover2 {
  position: absolute;
}

JavaScript

$(function () {
$('#open').click(function(){
$('#myModal').modal('show')
});
    $('#popover1').popover({
      container:"body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    
    $('#popover2').popover({
      container: $(".modal-body"),
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div> ' +``;
      },
      container: $('#myModal')
    });
});