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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a rel="popover" role="button" id="abrir" class="btn btn-default btn-flat" title="TĂ­tulo">
  <i class="fa fa-plus">+</i>
</a>

<div id="popover-content" style="display: none">
  <div class="row">
    <form id="form" name="form" method="post" action="pagina_teste.php">
      <div class="form-group col-sm-12">
        <label for="nome">Nome</label>
        <input type="text" id="nome" name="nome" class="form-control" autocomplete="off" autofocus placeholder="Nome" value="<?php echo set_value('nome'); ?>">
      </div>
      <div class="form-group col-sm-12">
        <label for="validade">Validade</label>
        <input type="text" id="validade" name="validade" class="form-control" autocomplete="off" autofocus placeholder="00/00/00000" value="<?php echo set_value('validade'); ?>">
      </div>
      <div class="col-md-12" style="">
        <div class="input-group pull-left">
          <button type="submit" class="btn btn-primary btn-flat pull-left">
            <i class="fa fa-check">./</i>
          </button>
        </div>
        <div class="input-group pull-right" style="">
          <button type="button" id="fechar" class="btn btn-default btn-flat" rel="popover">
            <i class="fa fa-times">x</i>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

JavaScript

$(function() {
  $('a[rel=popover]').popover({
    html: 'true',
    placement: 'right',
    content: function() {
      return $('#popover-content').html();
    }
  });
});

 $(document).on('click', 'button#abrir', function() {
    $('a[rel=popover]').popover('show');
  });