JSFiddle - React, Tailwind, and code Playground

by satya6565

HTML

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h1>Hello, world!</h1>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalLong" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">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">
                    <button type="button" id="popover-btn" class="btn btn-lg btn-danger">Click to toggle popover</button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

JavaScript

$(document).ready(function () {
    	var popoverContent = '<div> \
                                    <select class="form-control mb-1"> \
                                        <option value="eq">Is equal to</option>  \
                                        <option value="ct">Contains</option> \
                                    </select> \
                                    <input type="text" class="form-control"> \
                                </div>';
    
    	$('#exampleModalLong').on('shown.bs.modal', function (e) {
    		var popover = $('#popover-btn').popover({
    			title: '',
    			placement: 'bottom',
    			html: true,
    			content: popoverContent,
    			trigger: 'manual'
    		});
    	});
    
    	$('#popover-btn').click(function () {
    		$(this).popover('show');
    	});
    
    });