JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <div class="container">
    <h3>Popover Example</h3>
    <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
    <a href="#" data-toggle="popover" title="Popover Header">Toggle popover</a>
  </div>
</body>

JavaScript

$(document).ready(function(){

	function closepop(){
    	console.log('hello')
        }
        
    var pop = $('[data-toggle="popover"]').popover({
    html:true,
    content: function(){
    	return "<form name='statusForm'>"+
        			"<div class='form-group'>"+
                    	"<textarea class='form-control' name='estado' placeholder='Motivo de la no-disponibilidad' required></textarea>"+
                    "</div>"+
        			"<button class='button btn btn-success' type='button'>Aceptar</button>"+
                    "<button class='button btn btn-success' type='button' onclick='closepop()'>Cancelar</button>"+
                "</form>"
    }});  
    
    
    
});