cssvue.jsvuejs2vuetify.jsv-data-table

V-toolip on other template [vuetify]


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


Solution

  • 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