Всплывающие подсказки

Посмотреть код

<script setup lang="ts">
import { useTemplateRef, ref } from "vue";
import { type ComponentExposed } from "vue-component-type-helpers";
import { PopoverComponent } from "luna";

const popover = useTemplateRef<ComponentExposed<typeof PopoverComponent>>('popover');
const counter = ref(0);

const togglePopover = (event: MouseEvent) => {
  counter.value++;
  popover.value.toggle(event)
}
</script>
<template>
  <div class="align-demo">
    <div class="buttons-table">
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
      <div class="button-cell">
        <button type="button" @click="togglePopover">Кликни меня</button>
      </div>
    </div>
    <PopoverComponent ref="popover" group="demo">
      <div class="demo-popover">
        <div class="message info no-border">Количество кликов: {{ counter }}</div>
      </div>
    </PopoverComponent>
  </div>
</template>
<style scoped>
  .align-demo {
      width: 100%;
    }

    .buttons-table {
      .button-cell {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      width: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    }
</style>

Параметры PopoverComponent

prefferedAlign? Array<ALIGN> - в каком порядке пытаться найти свободное место для отображения. По умолчанию: ['bottom', 'top', 'right', 'left']

closeButton? boolean - показать кнопку закрытия

group?: string - объединять в группы. По умолчанию global