title: Vuetify tooltip shows in top left corner when a link from a v-button is followed
body: <p>I have encountered a strange behaviour of the <a href="https://vuetifyjs.com/en/components/tooltips/" rel="nofollow noreferrer">Tooltip component</a> in Vuetify. I am using this component inside Vuetify's <a href="https://vuetifyjs.com/en/components/data-tables/" rel="nofollow noreferrer">DataTable component</a>, where I use a slot for one of the data columns into which I add Vuetify's <a href="https://vuetifyjs.com/en/components/buttons/" rel="nofollow noreferrer">Button component</a> and then I use the Tooltip component inside that button.</p>
  <p><strong>Problem definition:</strong></p>
  <p>The tooltip behavior is following:</p>
  <ul>
  <li>When I move my mouse to the button and wait, the tooltip shows correctly.</li>
  <li>When I click the button when the tooltip is shown, it redirects to the correct page and everything works as expected.</li>
  <li>When I click the button when the tooltip is not shown, it redirects to the correct page, but the tooltip then shows up in the top left corner of the page and gets stuck.</li>
  <li>When the tooltip gets stuck, I can redirect to different pages but the tooltip is still in the top left corner.</li>
  <li>When the tooltip gets stuck, I can go back to the page with my table. If I move my mouse to the button that initially used to get redirected and then move away, the tooltip disappears.</li>
  </ul>
  <p><strong>Additional information:</strong></p>
  <p>I have found out that the behavior is probably caused by the fact that in my app, I have set this component to be kept alive via</p>
  <pre class="lang-js prettyprint-override"><code>&lt;keep-alive :include=&quot;['PrintHistory']&quot;&gt;
    &lt;router-view /&gt;
  &lt;/keep-alive&gt;
  </code></pre>
  <p>When I remove the <code>PrintHistory</code> string, it behaves as expected.</p>
  <p>I have also found out that when I set the <code>open-delay</code> parameter to a higher number, it shows the tooltip in the top left corner with higher delay.</p>
  <p>It does not matter what page I'm redirecting to, the problem still prevales.</p>
  <p><strong>The code of the entire component:</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-layout style=&quot;width:100%;&quot; justify-space-between class=&quot;mb-0&quot;&gt;
          &lt;h2&gt;{{ $t('print_history.title') }}&lt;/h2&gt;
      &lt;/v-layout&gt;
      &lt;v-card class=&quot;elevation-1 my-1 pt-1&quot; v-resize=&quot;onResize&quot;&gt;
  
        &lt;v-layout style=&quot;text-align: right;&quot;&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-text-field
            v-model=&quot;search&quot;
            append-icon=&quot;mdi-magnify&quot;
            :label=&quot;$t('print_history.search')&quot;
            class=&quot;ma-2&quot;
          &gt;&lt;/v-text-field&gt;
        &lt;/v-layout&gt;
  
        &lt;v-data-table :headers=&quot;headers&quot;
                      :items=&quot;rows&quot;
                      :loading=&quot;loading&quot;
                      :loading-text=&quot;$t('v_big_table.loading')&quot;
                      :sort-by=&quot;'action_at'&quot;
                      :sort-desc=&quot;true&quot;
                      :search=&quot;search&quot;
                      :page.sync=&quot;page&quot;
                      @page-count=&quot;page_count = $event&quot;
                      hide-default-footer
                      :items-per-page=&quot;computed_items_per_page&quot;&gt;
          &lt;template v-for=&quot;header in headers&quot; v-slot:[`header.`+header.value]=&quot;{ header }&quot;&gt;
            &lt;span class=&quot;table_header&quot; v-bind:key=&quot;`header_customization_`+header.value&quot;&gt;{{ $t(header.text) }}&lt;/span&gt;
          &lt;/template&gt;
          &lt;template v-slot:item.show_file=&quot;{ item }&quot;&gt;
            &lt;!-- The redirecting is not yet finished --&gt;
            &lt;v-btn :to=&quot;`/pdfjs-viewer`&quot; icon small class=&quot;ma-0&quot; color=&quot;primary&quot;&gt;
              &lt;v-tooltip top open-delay=&quot;600&quot; :color=&quot;tooltip_bg_color&quot;&gt;
                &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                      &lt;v-icon
                        v-bind=&quot;attrs&quot;
                        v-on=&quot;on&quot;&gt;mdi-file-search-outline&lt;/v-icon&gt;
                &lt;/template&gt;
                &lt;span class=&quot;tooltip&quot;&gt;{{ $t('print_history.show_file') }} {{ item['path_to_file'].split(&quot;/&quot;)[item['path_to_file'].split(&quot;/&quot;).length-1] }}&lt;/span&gt;
              &lt;/v-tooltip&gt;
            &lt;/v-btn&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
        &lt;v-pagination
          v-model=&quot;page&quot;
          :length=&quot;page_count&quot;
          :total-visible=&quot;9&quot;
        &gt;&lt;/v-pagination&gt;
      &lt;/v-card&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  /**
   * @typedef {Object} Sorter - stores information about column sorting
   * @property {string} field - unique name of the column to sort
   * @property {string} dir - direction of sorting: ascending ('asc'), descending ('desc')
   */
  
  /**
   * @typedef {Object} Filter - stores information about column sorting
   * @property {string} field - unique name of the column to filter
   * @property {string} operator - operator defining the filter
   * @property {string} value - direction of sorting: ascending ('asc'), descending ('desc')
   * @property {string} color - color of the v-chip when the filter is shown
   */
  
  import { utcTimeStamp, utcToLocal } from '../../../utils'
  
  /**
   * Shows a history of printing arranged in a table with sorting and filtering capabilities.
   */
  export default {
    name: &quot;PrintHistory&quot;,
    data () {
      return {
        tooltip_bg_color: 'rgba(0,0,0,0.7)',
        err_msg: '',
        search: '',
        row_count: 0,
        total_row_count: 0,
        rows: [],
        rows_filtered: [],
        loading: true,
        page: 1,
        page_count: null,
        default_items_per_page: 13,
        window_size: {
          x: 0,
          y: 0
        },
        initial_sorters: [{field: 'action_at', dir: 'desc'}],
        headers: [
          {
            text: 'print_history.date_and_time',
            value: 'action_at',
            align: 'end'
          },
          {
            text: 'print_history.report_type',
            value: 'translated_report_type'
          },
          {
            text: 'print_history.user_id',
            value: 'user_id'
          },
          {
            text: 'print_history.user_name',
            value: 'user_name'
          },
          {
            text: 'print_history.state',
            value: 'translated_state'
          },
          {
            text: 'print_history.show_file',
            value: 'show_file',
            sortable: false,
          },
        ],
        last_update: null,
      }
    },
    computed: {
      computed_items_per_page() {
        return Math.max(Math.floor((this.window_size.y - 300)/48), 1)
      }
    },
    methods: {
      utcToLocal,
      /**
       * Loads data from database. Assigns loading error in case the data cannot be loaded.
       */
      loadData() {
        this.loading = true
        this.last_update = utcTimeStamp()
        let start_time = Date.now()
        this.$store.dispatch('getPrintHistory')
        .then((response) =&gt; {
          this.rows = this.transformData(response.data)
          this.row_count = this.rows.length
          this.total_row_count = response.data.total_row_count
          console.log(&quot;Total time:&quot; + (Date.now() - start_time))
        })
        .catch(() =&gt; {
          this.err_msg = 'errors.error_loading_data'
          this.data = []
        })
        .finally(() =&gt; {
          this.loading = false
        })
      },
      /**
       * This will show file in a javascript PDF browser once implemented.
       * @param absolute_path absolute path to the file to be shown
       */
      showFile(absolute_path) {
        console.log(absolute_path)
      },
      /**
       * Processes data before saving them to rows.
       * @param {object[]} data_to_transform array of objects that should be processed
       * @return {object[]} array of objects that are formatted for the data table
       */
      transformData(data_to_transform) {
        let data_to_return = data_to_transform
        data_to_return.forEach((entry) =&gt; {
          entry['user_name'] = entry.user.name
          entry['path_to_file'] = entry.misc.path_to_file
          entry['action_at'] = this.$d(utcToLocal(entry.action_at), 'datetime')
          entry['translated_report_type'] = this.$t(`print_history.report_types.` + entry.report_type)
          entry['translated_state'] = this.$t(`print_history.states.` + entry.state)
        })
        return data_to_return
      },
      onResize() {
        this.window_size = {x: window.innerWidth, y: window.innerHeight}
      }
    },
    beforeMount() {
      this.loadData()
    },
    activated() {
      // check if the server has new data, refresh component data if true
      this.$store.dispatch('lastDataUpdate')
      .then((response) =&gt; {
        if (response.data &gt; this.last_update) {
          this.loadData()
        }
      })
      // on error refresh anyway
      .catch(() =&gt; {
        this.loadData()
      })
    },
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .table_header {
    font-weight: bold;
    color: black;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>An example of the <code>response.data</code> retrieved from the database via the <code>loadData</code> method:</strong></p>
  <pre class="lang-js prettyprint-override"><code>[{
     action_at: &quot;2021-01-20T13:03:39.528843&quot;,
     id: &quot;1&quot;,
     inventory_id: &quot;1&quot;,
     reporty_type: &quot;my_report_type&quot;,
     state: &quot;archived&quot;,
     misc: {
       path_to_file: '/some/path/to/file.pdf'
     },
     user: {
       name: &quot;John Doe&quot;,
       id: &quot;123456&quot;,
       roles: {role_1: true}
     },
     user_id: &quot;123456&quot;
   },
   {
     action_at: &quot;2021-01-20T13:05:39.528843&quot;,
     id: &quot;2&quot;,
     inventory_id: &quot;1&quot;,
     reporty_type: &quot;my_other_report_type&quot;,
     state: &quot;moved_to_print&quot;,
     misc: {
       path_to_file: '/some/path/to/file2.pdf'
     },
     user: {
       name: &quot;Jane Doe&quot;,
       id: &quot;123457&quot;,
       roles: {role_1: true}
     },
     user_id: &quot;123457&quot;
   }]
  </code></pre>
  <p><strong>Question:</strong></p>
  <p>Is this tooltip behavior a bug or do I have to set some additional settings for it? Is there some workaround so it behaves correctly even when the component is kept alive?</p>
  <p>In case of some additional information, ask away.</p>