feat(VTooltip): open on touch hold

[J-Sek]

Description

Note: open-on-click is not a good fit for mobile because the tooltip is persistent and requires a second click on the activator to close. I have supplemented onClick:outside, but it get's me half way - I can open multiple tooltips next to each other. Maybe we need onTouchstart:outside?

It is rather an experiment than a proposal. I am not sure about the real-life utility and extensive configurability needs described in the related story are not backed by concrete examples. If we were to make set it on VTooltip, there is no need to expose any gauges.

TODO:

• refactor to reusable v-touch-hold with only a hold duration to configure (max 100 LOC)
• close tooltip on touchstart outside
• tests

related to #5322

Markup:

// dev/vuetify/defaults.js
// (for v-tooltip directives)
export default {
  VTooltip: {
    openOnTouchHold: true,
    openDelay: 400,
  },
}

<template>
  <v-app theme="dark">
    <v-container
      class="h-100 d-flex flex-column ga-3 align-center justify-center"
    >
      <v-tooltip location="top" open-on-touch-hold>
        <template #activator="{ props }">
          <v-btn v-bind="props" text="Touch and hold" />
        </template>
        <span>Open on touch-hold</span>
      </v-tooltip>
      <div class="d-flex ga-3">
        <v-btn
          icon="mdi-cow"
          v-tooltip:bottom="'Order milk'"
        />
        <v-btn
          icon="mdi-coffee"
          v-tooltip:bottom="'Order coffee beans'"
        />
      </div>
    </v-container>
  </v-app>
</template>