Для реализации своих tooltip-ов и "выпадашек", наверное, самым оптимальный вариантом является использование современной и минималистичной библиотеки Floating UI

Их Vue адаптер мне не подошел. Вот простой вариант своего тултипа на их чистом js пакете.

В данном случае содержимое тултипа является ребенком элемента, на котором его надо показать. Возможны другие варианты реализации, включая кастомную директиву.

Обертывать в Tooltip компонент то, на чем его надо показать, имхо, извращение.

<script setup lang="ts">
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { onMounted, ref, useTemplateRef } from "vue";

const popover = useTemplateRef("popover");

onMounted(() => {
  popover.value.showPopover();
  computePosition(popover.value.parentElement, popover.value, {
    placement: "left",
    middleware: [flip(), shift({ padding: 5 }), offset(10)],
  }).then(({ x, y }) => {
    Object.assign(popover.value.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
});
</script>

<template>
  <div
    ref="popover"
    class="popover"
    popover
    role="tooltip"
  >
    <div class="tooltip-body">Hello</div>    
  </div>
</template>

<style scoped>
.popover {
  position: fixed;
  width: max-content;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1em;
  text-align: left;
  border: 1px solid var(--bbl-c-border);
  border-radius: 5px;
  max-width: 400px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.12),
    0 3px 9px rgba(0, 0, 0, 0.12);
  border-color: #bbb;
}
  </style>

#lib #tooltip #dropdown