bandolier-website/admin/bando/demos/Tooltip.svelte

<style>
  boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-row-gap: 2rem;
    grid-column-gap: 2rem;
  }

  box {
    width: 100%;
    background-color: var(--color-bg-inverted);
    color: var(--color-text-inverted);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
  }
</style>

<p>Hover over each of these boxes to see the tooltip.</p>

<boxes>
  <box>
    <h1>top-right</h1>
    <tooltip>This thing works?</tooltip>
  </box>

  <box>
    <h1>top-left</h1>
    <tooltip class="top-left">This thing works?</tooltip>
  </box>

  <box>
    <h1>bottom-right</h1>
    <tooltip class="bottom-right">This thing works?</tooltip>
  </box>

  <box>
    <h1>bottom-left</h1>
    <tooltip class="bottom-left">This thing works?</tooltip>
  </box>

  <box>
    <h1>right</h1>
    <tooltip class="right">This thing works?</tooltip>
  </box>

  <box>
    <h1>left</h1>
    <tooltip class="left">This thing works?</tooltip>
  </box>

  <box>
    <h1>top</h1>
    <tooltip class="top">This thing works?</tooltip>
  </box>

  <box>
    <h1>bottom</h1>
    <tooltip class="bottom">This thing works?</tooltip>
  </box>
</boxes>