I have a v-data-table all set with 5 columns.
I'd like to have a text appearing as the v-tooltip component.
But since it's in one template, I can't use the tooltip on it because v-tooltip also requires the <template #activator="{ on }">
. Does anyone know how to do it ?
Here's what one of my column looks like in the code.
<template #item.title2="{ item }">
<div class="ellipsis news">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
v-on="on"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</div>
</template>
Ideally, I would put the v-tooltip around it but then I get this message.
My v-data-table looks like this. I'd like the 'news' and 'actors' fields'details when I hover.
If there's not a second #activator
slot you can simply place the <v-tooltip>
element between the column item slot and the tooltip's activator slot
<template #item.title2="{ item }">
<v-tooltip bottom>
<template #activator="{ on, attrs }">
<div class="ellipsis news" v-bind="attrs" v-on="on">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color: white"> {{ item.title }} </span>
</a>
</div>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
Your code snippet doesn't show a second #activator
slot being used, but if you do find yourself in that situation where you have to deal with nested activators, there is actually documentation about this on the v-menu page