<section class="demo-section" aria-labelledby="tooltips-heading">
  <h2 id="tooltips-heading">Tooltips</h2>

  <div class="cluster">
    <span class="tooltip" data-placement="top">
      <button class="tooltip-trigger btn btn-sm btn-secondary" type="button">Top</button>
      <span class="tooltip-content">Tooltip on top</span>
    </span>

    <span class="tooltip" data-placement="bottom">
      <button class="tooltip-trigger btn btn-sm btn-secondary" type="button">Bottom</button>
      <span class="tooltip-content">Tooltip on bottom</span>
    </span>

    <span class="tooltip" data-placement="left">
      <button class="tooltip-trigger btn btn-sm btn-secondary" type="button">Left</button>
      <span class="tooltip-content">Tooltip on left</span>
    </span>

    <span class="tooltip" data-placement="right">
      <button class="tooltip-trigger btn btn-sm btn-secondary" type="button">Right</button>
      <span class="tooltip-content">Tooltip on right</span>
    </span>
  </div>

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

    createApp({
      components: { GnTooltip, GnButton },
      template: `
        <div class="cluster">
          <gn-tooltip placement="top">
            <template #trigger>
              <gn-button variant="secondary" size="sm">Top</gn-button>
            </template>
            Vue tooltip on top
          </gn-tooltip>
          <gn-tooltip placement="bottom">
            <template #trigger>
              <gn-button variant="secondary" size="sm">Bottom</gn-button>
            </template>
            Vue tooltip on bottom
          </gn-tooltip>
          <gn-tooltip placement="left">
            <template #trigger>
              <gn-button variant="secondary" size="sm">Left</gn-button>
            </template>
            Vue tooltip on left
          </gn-tooltip>
          <gn-tooltip placement="right">
            <template #trigger>
              <gn-button variant="secondary" size="sm">Right</gn-button>
            </template>
            Vue tooltip on right
          </gn-tooltip>
        </div>
      `
    }).mount("#vue-tooltips-app");
  </script>
</section>