Modal popover

by Jason Butz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    Ad quia placeat ea illo. Esse libero inventore eum. Laboriosam et quasi perferendis rerum distinctio esse voluptatum quia.
                </p>
                <p>
                    Fuga odio fugiat quia distinctio non. Ad corrupti voluptates aut rerum consequatur. Dolorum et reiciendis itaque cum quidem.
                </p>
                <p>Ad amet aut atque voluptatibus adipisci qui. Ipsa quaerat sint debitis placeat et consequatur expedita. Deserunt ducimus ratione earum dolorem voluptas ut voluptas. Quam atque enim veniam sapiente recusandae veritatis. Repellat nemo ut
                    expedita sed.</p>
                <button id="copyBtn" class="btn btn-secondary btn-small">
                Copy!
                </button>
                <p>Mollitia voluptatem rerum consequatur quis voluptas occaecati ea. Incidunt et reiciendis voluptates vitae id consequuntur eaque earum. Laboriosam soluta earum odio ducimus est suscipit et quibusdam.</p>
                <p>Soluta sed quis iure neque fugit autem. Dolorem repellat voluptate aut sit repudiandae consequatur iure. Ut laboriosam unde suscipit qui occaecati...

JavaScript

$('.modal').modal();
let popoverNodes = document.createElement('div');
popoverNodes.append(document.createElement('label').innerText = 'New Story Title');

let input = document.createElement('input');
input.type = 'text';
input.value = 'My Story';
popoverNodes.append(input);

$('#copyBtn').popover({
	container: 'body',
    placement: 'right',
    content: document.getElementById('popoverTmpl')
})