V-toolip on other template [vuetify]

Quentin 0
Viewed 23

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.

enter image description here

My v-data-table looks like this. I'd like the 'news' and 'actors' fields'details when I hover.

enter image description here

v-data-table vuetify.js vuejs2 vue.js css
1 Answers

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

yoduh0
Related