Vuetify v-tooltip within a shared component

Question

I have a shared component using Vuetify's v-tooltip, and it doesn't work I followed the vuetify documentaion here documentaion

I want to implement a v-tooltip where the tooltip content is entirely contained within the button element. Can someone help me troubleshoot this issue?

Here's the code for my tooltip component:

<template>
  <v-tooltip
    bottom
    :content-class="
      `
      ${withArrow ? tooltipClass : ''}
      custom-tooltip
      ${color}
      darken-2
      `
    "
    open-delay="250"
    max-width="288px"
    :activator="activator"
    :location="location"
  >
    <span class="tooltip-text">{{ getTooltipText() }}</span>
  </v-tooltip>
</template>

And here's how I use it:

                  <v-btn
                    v-analytics="{
                      name: 'info_search clicked',
                      params: {
                        datatype:
                          item.documentType.label && item.documentType.label[0]
                      }
                    }"
                    icon
                    :data-test="`result-list-item-details-${i + 1}`"
                    @click.prevent.native.stop="openDetails(item.id)"
                  >
                    <tooltip
                      activator="parent"
                      location="bottom"
                      tooltip-text="favorite.add"
                    />
                    <v-icon>mdi-information-outline</v-icon>
                  </v-btn>

this is my vue and vuetify version "vue": "^2.7.14", "vuetify": "2.6.15",

Answer 1

It appears that you're using a custom tooltip component with Vuetify's v-tooltip

<v-btn
  v-analytics="{
    name: 'info_search clicked',
    params: {
      datatype: item.documentType.label && item.documentType.label[0]
    }
  }"
  icon
  :data-test="`result-list-item-details-${i + 1}`"
  @click.prevent.native.stop="openDetails(item.id)"
>
  <tooltip
    :activator="activatorElement" <!-- Use a variable for activator -->
    location="bottom"
    :tooltip-text="tooltipText" <!-- Bind the tooltip text prop -->
  />
  <v-icon>mdi-information-outline</v-icon>
</v-btn>