[Feature Request] Add a global variable to set the default delay for tooltips

[MatthewAry]

Problem to solve

Tooltips by default have a 0ms delay. Most UIs have a delay on their tooltip so that they appear after a short time to give the user a tip on the UI element they are hovering over. This makes it so that tooltips don't create visual noise for the user.

Proposed solution

If a variable is added to the vuetify plugin constructor which sets the default delay for tooltips, that would be very helpful.

[MajesticPotatoe]

does open-delay prop not suffice for this, or we talking about some sort of SASS variable?

[MatthewAry]

open-delay is something that you have to set for every time you use the tooltip component. The delay is not something that I think is set by css. If we had a global variable then it would help the developer enforce a consistent behavior across tooltips. Without one, the alternative would be to create some sort of global mixin and apply the global mixin variable to the tooltip component each time its used.

[MajesticPotatoe]

I believe the current option for now would be to create a custom component that extends v-tooltip and has predefined defaults. SASS approach i was more thinking of just setting an animation delay but you can ignore that.

Right now we do not have any abilities to set global component configurations, however this is already on our official roadmap for v2.3 - Orion

[jacekkarczmarczyk]

Let's keep the issue with general global config instead of specific prop
#9677

[prajapatidk]

It is working 100%

First - create custom component for tooltip (CustomTooltip.vue)

<script lang="ts">
import Vue from "vue";
//@ts-ignore
import VTooltip from "vuetify/lib/components/VTooltip/VTooltip";

// Create Base Mixins and Define Custom Properties
const base = Vue.extend({ mixins: [VTooltip] });
export default base.extend({
  name: "CustomTooltip",
  props: {
    closeDelay: {
      type: [Number, String],
      default: 0
    },
    disabled: Boolean,
    openDelay: {
      type: [Number, String],
      default: 1000
    },
    openOnHover: {
      type: Boolean,
      default: true
    },
    openOnFocus: {
      type: Boolean,
      default: true
    },
    tag: {
      type: String,
      default: 'span'
    },
    transition: String
  },
});
</script>

Second - import the custom tooltip component in main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import CustomTooltip from "./components/CustomTooltip.vue"

Vue.config.productionTip = false

Vue.component("CustomTooltip", CustomTooltip)

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Third - use it any component

<template>
  <v-form ref="form" v-model="valid" lazy-validation class="pa-16">

    <CustomTooltip top class="">
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on"> Button </v-btn>
      </template>
      <span>Tooltip</span>
    </CustomTooltip>


  </v-form>
</template>

<script>
export default {
  name: "FormFields",
};
</script>