How to get tooltip to display on top of text with Tailwind I'n my Vue app, I'm attempting to create a simple tooltip that on hover over an icon, displays text on top of a form (see this Tailwind Play )
<div class="p-8 max-w-4xl bg-white rounded-md shadow overflow-hidden">
<div class="flex px-8 gap-x-4 justify-between -mb-8 -mr-6">
<div class"w-full pr-6">
<label for="hours" class="block">Hours</label>
<input id="hours" type="text" class="border border-b-emerald-300">
</div>
<div class="flex px-4 w-full">
<label v-if="label" class="block" :for="id">Area</label>
<select class="w-full border border-emerald-900 label="Area" @change="updateApprovers">
<option :value="null"/>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 2</option>
</select>
<div v-if="areaDescription" class="flex group items-center">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 fill-indigo-400 items-center group"
title="Title here">
<path fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"/>
</svg>
<div
class="p-2 text-md tracking-normal text-white -translate-y-1/2 bg-black hidden top-1/2 rounded-lg group-hover:block group-hover:z-50 group-hover:relative">
Description goes here
</div>
</div>
</div>
</div>
</div>
I'm using hidden and block instead of opacity so that the element doesn't push the form field to the left when it's not in use41084108. However, when I do display it on hover, I want it to be over the form, which it's not doing. what do I need to change?
To get the tooltip to display on top of the text with Tailwind, you can make the following changes to your code:
Add the relative class to the parent element of the tooltip (div with class flex group items-center).
Add the z-50 class to the tooltip element (div with class p-2 text-md tracking-normal text-white -translate-y-1/2 bg-black hidden top-1/2 rounded-lg group-hover:block group-hover:z-50 group-hover:relative).
Here's the updated code:
<div v-if="areaDescription" class="flex group items-center relative">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 fill-indigo-400 items-center group"
title="Title here">
<path fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"/>
</svg>
<div class="p-2 text-md tracking-normal text-white -translate-y-1/2 bg-black hidden top-1/2 rounded-lg group-hover:block group-hover:z-50 group-hover:relative">
Description goes here
</div>
</div>
By adding the relative class to the parent element and the z-50 class to the tooltip element, the tooltip will be positioned on top of the form when it is displayed on hover.
Hmmm, sorry Larry, that didn't work. With the code as you have it, it still pushes the Area field to the left when it is displayed.
Anyone else have a thought?
@wonder95 you can use v-tooltip directive provided by the v-tooltip library.
//in your Vue Component
import 'v-tooltip/dist/v-tooltip.css';
import VueTooltip from 'v-tooltip';
export default {
// ...
mounted() {
Vue.use(VueTooltip);
},
// ...
};
// in your template
<div v-tooltip="{ content: 'Description goes here', placement: 'top' }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-6 h-6 fill-indigo-400 items-center group" title="Title here">
<path fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"/>
</svg>
</div>
Thanks, it looks like this is for Vue2, correct? My app is Vue 3. It looks like I can use this version , though.
Please sign in or create an account to participate in this conversation.
