title: How to include a Form inside a Popover using Bootstrap 4.3?
body: <p>I am trying to include a form inside a <a href="https://getbootstrap.com/docs/4.3/components/popovers/" rel="nofollow noreferrer">Popover</a>, created using Bootstrap 4.3, Popper.js and jQuery 3. The latest version of each. The problem is that it works with text, it works with  tags, but as soon as I use forms, labels and inputs it doesn't parse the HTML.</p>
  
  <p>I have two examples in CodePen:</p>
  
  <ol>
  <li>Everything via data-attributes: <a href="https://codepen.io/kevinmamaqi/pen/bXvXmg" rel="nofollow noreferrer">link</a></li>
  <li>Via JS: <a href="https://codepen.io/kevinmamaqi/pen/YmLKzX" rel="nofollow noreferrer">link</a></li>
  </ol>
  
  <p><strong>Example 1 code</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12 mt-5"&gt;
          &lt;h1&gt;Bootstrap 4 form in popover&lt;/h1&gt;
          &lt;hr&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h2 class="mt-3"&gt;
            &lt;span
              class="editable"
              data-toggle="popover"
              data-container="body"
              data-title="Edit"
              data-content="&lt;form&gt;
    &lt;div class='form-group'&gt;
      &lt;label for='exampleInputEmail1'&gt;Email address&lt;/label&gt;
      &lt;input type='email' class='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email'&gt;
      &lt;small id='emailHelp' class='form-text text-muted'&gt;We'll never share your email with anyone else.&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class='form-group'&gt;
      &lt;label for='exampleInputPassword1'&gt;Password&lt;/label&gt;
      &lt;input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'&gt;
    &lt;/div&gt;
    &lt;div class='form-group form-check'&gt;
      &lt;input type='checkbox' class='form-check-input' id='exampleCheck1'&gt;
      &lt;label class='form-check-label' for='exampleCheck1'&gt;Check me out&lt;/label&gt;
    &lt;/div&gt;
    &lt;button type='submit' class='btn btn-primary'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;"&gt;
              Modify this
            &lt;/span&gt;
          &lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.editable {
    color: blue;
    border-bottom: 2px dashed blue;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("h2 &gt; .editable").popover({
    html: true
  });
  </code></pre>
  
  <p><strong>Example 2 code</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12 mt-5"&gt;
          &lt;h1&gt;Bootstrap 4 form in popover&lt;/h1&gt;
          &lt;hr&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h2 class="mt-3"&gt;
            &lt;span
              class="editable"
              data-toggle="popover"
              data-container="body"
              data-title="Edit"&gt;
              Modify this
            &lt;/span&gt;
          &lt;/h2&gt;
          &lt;div id="form-container" style="visibility: hidden"&gt;
            &lt;form&gt;
    &lt;div class='form-group'&gt;
      &lt;label for='exampleInputEmail1'&gt;Email address&lt;/label&gt;
      &lt;input type='email' class='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email'&gt;
      &lt;small id='emailHelp' class='form-text text-muted'&gt;We'll never share your email with anyone else.&lt;/small&gt;
    &lt;/div&gt;
    &lt;div class='form-group'&gt;
      &lt;label for='exampleInputPassword1'&gt;Password&lt;/label&gt;
      &lt;input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'&gt;
    &lt;/div&gt;
    &lt;div class='form-group form-check'&gt;
      &lt;input type='checkbox' class='form-check-input' id='exampleCheck1'&gt;
      &lt;label class='form-check-label' for='exampleCheck1'&gt;Check me out&lt;/label&gt;
    &lt;/div&gt;
    &lt;button type='submit' class='btn btn-primary'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("h2 &gt; .editable").popover({
    content: function() {
      return $('#form-container').html();
    },
     html: true,
    placement: 'bottom'
  });
  </code></pre>