Html contents inside a bootstrap 5 popover

bs5-popover.html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(function() {
    var options = {
        html: true,
        title: "Optional: HELLO(Will overide the default-the inline title)",
        //html element
        content: $("#popover-content")
        //Doing below won't work. Shows title only
        //content: $("#popover-content").html()

      }
      var exampleEl = document.getElementById('example')
      var popover = new bootstrap.Popover(exampleEl, options)
})



<!-- language: lang-html -->

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <div id="popover-content">
      <div class="input-group">
        <input type="text" class="form-control form-control-sm" placeholder="Search" name="search">
        <div class="input-group-btn">
          <button class="btn btn-danger" type="submit">
            <i class="bi bi-search"></i>
          </button>
        </div>
      </div>
      <div class="col-sm-8"></div>
      <button class="btn btn-success m-3">Button</button>
      <input type="submit" class="btn btn-danger" placeholder="Button red">
    </div>

    <a id="example" tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" title="Default: Html inside popover" data-bs-content="And here's some amazing content. It's very engaging. Right? This is default, but Can be empty">Html inside popover</a>

<!-- end snippet -->