title: Bootstrap 4 Popover with HTML Content
body: <p>This is my code, but it will not work.</p>
  
  <p>When I use the native Bootstrap PopOver with HTML in it's content, the frontend is not displaying that PopOver and the HTML Source is malformatted.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
          &lt;title&gt;test&lt;/title&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" &gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;   
          &lt;style&gt;
              .popover{
                  color: #757575 !important;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
               &lt;span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="&lt;div class="popover"&gt;text text&lt;/div&gt;"&gt;Toggle popover&lt;/span&gt;
          &lt;/div&gt;
          &lt;script&gt;
              $(function () {
                  $('[data-toggle="popover"]').popover()
              })
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Remove Class property.
  It can work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
          &lt;title&gt;test&lt;/title&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" &gt;&lt;/script&gt;
          &lt;script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;   
          &lt;style&gt;
              .popover{
                  color: #757575 !important;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="&lt;div&gt;text text&lt;/div&gt;"&gt;Toggle popover&lt;/span&gt;
          &lt;/div&gt;
          &lt;script&gt;
              $(function () {
                  $('[data-toggle="popover"]').popover()
              })
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.</p>