Troubleshooting Bootstrap PopConfirm Popovers

Troubleshooting popovers fired using the PopConfirm Bootstrap plug-in when fired from inside a <div> where the CSS is set to overflow:hidden, and also from inside a modal.

HTML

<script src="https://rawgithub.com/ifnot/PopConfirm/master/jquery.popconfirm.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
      <button class="btn btn-default" data-toggle="modal" data-target="#myModal">
          Launch Modal
      </button>

      <!-- Modal -->
      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">PopConfirm and Modals</h4>
              </div> <!-- /.modal-header -->
              <div class="modal-body">
                  <p>Test modal that triggers PopConfirm popover.</p>
                  <button type="button" class="btn btn-default btn-modalTest">
                      Trigger PopConfirm
                  </button>
              </div> <!-- /.modal-body -->
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div> <!-- /.modal-footer -->
            </div> <!-- /.modal-content -->
          </div> <!-- /.modal-dialog -->
      </div> <!-- /.modal -->
  </div> <!-- /.row -->
    
  <div class="row">

      <div id="item1" class="item col-xs-12">
        <div class="handle"></div>
        <div class="itemSubContainer">
          <div class="row">
            <h4 class="col-xs-12 col-sm-11">Item 1 Title</h4>
          </div>
          <div class="row">
            <div class="col-xs-12 col-sm-6">
              <small>http://jsfiddle.net</small>
            </div>
          </div>
          <div...

CSS

body {
  padding: 60px;
}

.item {
    margin: 10px;
    padding: 0px 10px 10px 5px;
    border: 1px solid #ddd;
    background:#fff;
    border-radius: 8px;
}

.itemSubContainer {
  margin-left: 15px;
  overflow: hidden;
}

.handle {
    width:15px;
    margin: 5px 10px 0 0;
    height:54px;
    float: left;
    cursor: move;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQIW2OcN2/efwYgSEpKYgTRjBgCIFFkAFaGDAC2jQgFaRPeawAAAABJRU5ErkJggg==) repeat;
}

JavaScript

$(document).ready(function() {

    // Modal test confirmation
    $(".btn-modalTest").popConfirm({
        title: "PopConfirm Modal",
        content: "Are you sure?",
        placement: "right",
        container: false
    });
    
    // Delete confirmation
    $(".btn-delete").popConfirm({
        title: "Delete",
        content: "Delete item?",
        placement: "top"
    });

    // Relist confirmation
    $(".btn-relist").popConfirm({
        title: "Relist",
        content: "Relist item?",
        placement: "top"
    });
    
});