<section class="demo-section">
  <h2>Popover</h2>

  <div class="popover">
    <button type="button" class="btn btn-sm btn-primary" data-popover-toggle aria-haspopup="true">Toggle popover</button>
    <div class="popover-panel">
      <h3 class="popover-title">Popover title</h3>
      <p class="popover-text">This is a lightweight floating panel triggered by a button click.</p>
    </div>
  </div>

  <h3>Vue popover</h3>
  <div id="vue-popover-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnPopover } from "/vue/index.js";

    createApp({
      components: { GnPopover },
      template: `
        <gn-popover title="Vue popover" text="This popover is rendered through the Vue adapter." position="bottom" />
      `
    }).mount("#vue-popover-app");
  </script>
</section>