Enhanced Vue-Tippy interaction behavior MIXIN.

vTippyMixin.js

// CCP: ENHACED VUE-TIPPY FUNCTIONALITY
// -------------------------- //
// Author: Carlos Perez
// Bike Monkey Inc.
// https://www.bikemonkey.net
// clayperez@gmail.com
// -------------------------- //
// License: Do whatevah you want with this. Just throw back some enhancements!
// -------------------------- //
// This mixin modifies the behavior of the vue-tippy settings
// by introducing a tip() function that can be used as such:
// <div v-tippy="tip('This is the tip content!')">Something</div>
//
// By using this instead of simply a plain old v-tippy directive,
// we are now able to dynamically modify the time that tips display
// for on the screen. This was done to essentially create a tip
// "mode" where subsequent tips display immediately after the first
// tip is displayed. But then after a certain amount of time the
// tip response time reverts back to a longer delay so that the tip
// mode is governed by how the user moves the mouse around.

export default {
  data() {
    return {
      tipDelay: [1000, 50],
      tipTimeout: 3000,
      tipTimer: null
    }
  },
  methods: {
    // This method is called by v-tippy
    tip(content) {
      return { delay: this.tipDelay, onShown: this.tipSpeedup, content }
    },
    tipSpeedup() {
      this.tipDelay = [0, 50] // Make tip reactivity immediate
      clearTimeout(this.tipTimer) // Clear the timeout to stay in speed mode while tips are still active
      this.tipTimer = setTimeout(this.tipSlowdown, this.tipTimeout)
    },

    // Slow down the tip reactivity to it's default state
    tipSlowdown() {
      this.tipDelay = [1000, 50]
    }
  }
}