How to display the custom created tooltip always on the right side of the element or next to the element?

I am developing a Nuxt 3-based application where creating a reusable custom tooltip menu bar which can display some information on hovering over the vee-validate Field that I want to reuse for various other components. For some reason the tooltip menu displays below the Field instead of displaying next to the Field on the right side.

How to fix the styles using the tailwind CSS to ensure that the tooltip menu always appears on the right side next to the Field? I have added the sample code in my CodeSandbox for reference.

Following are my Nuxt 3 application codes:

components/CustomToolTip.vue:

<template>
  <div>
    <div
      class="focus:outline-none mr-2"
      @mouseenter="hoverPopover($event)"
      @mouseleave="closePopover($event)"
    >
      <slot />
    </div>

    <div
      class="absolute mt-3 z-50 dark:bg-gray-700 bg-gray-300 dark:text-white text-black rounded-lg p-2 inline-block after:absolute after:border-4 dark:after:border-gray-700 after:border-gray-300 after:-left-0 after:top-1/3 after:-translate-x-1/2 after:rotate-45 transform -translate-y-[30%]"
      v-show="showTooltip"
    >
      <div class="max-w-xs max-h-20 overflow-auto">{{ tooltipInfo }}</div>
    </div>
  </div>
</template>
     
  <script setup>
import { ref } from "vue";

const props = defineProps({
  name: {
    type: String, // name associated with the field
    required: false,
  },
  fieldName: {
    type: String, //name associated with HoverIcon
    required: false,
    default: "",
  },
  fieldValue: {
    type: [String, Boolean, Number], //value associated with hoverIcon
    required: false,
    default: "",
  },
});

// Reactive state
const showTooltip = ref(false);
const tooltipInfo = ref("");

// Methods
const hoverPopover = () => {
  setTimeout(() => {
    showTooltip.value = true;
    showToolTipInfo();
  }, 500);
};

const closePopover = () => {
  showTooltip.value = false;
};

const showToolTipInfo = async () => {
  console.log(" Name : " + props.fieldName + " -- Value : " + props.fieldValue);
  tooltipInfo.value = "Custom CSS Tooltip Hello From The ToolTIp Menu Bar";
};
</script>

Following is my usage to wrap the other components to CustomTooltip.vue:
components/HoverMenuTest2.vue:

<template>
  <div class="flex flex-col items-center w-full">
    <CustomToolTip :name="name" :fieldName="name" :fieldValue="''">
      <div
        class="relative w-full h-full bg-gray-50 dark:text-white dark:bg-gray-700 dark:border-gray-600 border-gray-300 border rounded text-center block overflow-hidden"
      >
        <Field
          as="select"
          :name="name"
          v-model="item"
          class="w-full h-full bg-transparent p-2 outline-none dark:bg-gray-700"
        >
          <option
            v-for="option in options"
            :value="option.value"
            :key="option.value"
            :selected="option.selected"
          >
            {{ option.text }}
          </option>
        </Field>

        <Icon
          icon="iconamoon:arrow-down-2-bold"
          class="absolute right-2 top-1/2 transform -translate-y-1/2"
        />
      </div>
    </CustomToolTip>
  </div>
</template>
  
<script setup>
import { Icon } from "@iconify/vue";
import { Field } from "vee-validate";

const props = defineProps({
  options: {
    type: Array,
    required: false,
  },
  name: {
    type: String,
    required: false,
  },
});

const item = ref(props.options[0].value);
</script>
  
<style>
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}
</style>

Following is my usage in pages/Test.vue:

<template>
  <HoverMenuTest2 v-model="type" :name="'eventType'" :options="options" />
</template>

<script setup>
const type = useState("type", () => ({}));
const options = [
  { value: "value1", text: "Option 1", selected: true },
  { value: "value2", text: "Option 2" },
  { value: "value3", text: "Option 3" },
];
</script>

Currently when I hover over the Select dropdown then I get the tooltip as this:

I want it to be displayed next to the field something like this:

I tried with few styles etc but that does not seem to work and it modified the tooltip menu itself by striking its size and all, I want to ensure that the tooltip info bar is of the same size as expected but only need to move to the right side instead of displaying below the Field.