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.