(V3) Example custom theme

[Akryum]

Like I did in this commit, creating a new theme (and the corresponding component) allows you to customize v-tooltip to your needs.

In this example, I'll recreate the VMenu component (added in the commit mentioned above). This component should look exactly like the VDropdown component but should trigger with hover instead of click. It should also stay shown when the user mouse over the popper content itself.

1. Create a new theme in the themes config:

Vue.use(VTooltipPlugin, {
  themes: {
    menu: {
      $extend: 'dropdown',
      triggers: ['hover', 'focus'],
      popperTriggers: ['hover', 'focus'],
      delay: {
        show: 0,
        hide: 400,
      },
    },
  },
})

2. Create a new Menu.vue component:

<script>
import { PopperWrapper } from 'v-tooltip'

export default {
  ...PopperWrapper,
  name: 'Menu',
  vPopperTheme: 'menu',
}
</script>

3. That's it! You can now use your new component:

<template>
  <MyMenu>
    <button>Menu</button>

    <template #popper>
      More buttons here!
    </template>
  </MyMenu>
</template>

<script>
import MyMenu from './Menu.vue'

export default {
  components: {
    MyMenu,
  },
}
</script>

In this example, our Menu component will inherit the Dropdown styles, but we can also add our own:

.v-popper--theme-menu .v-popper__inner {
  background: green;
}

[telisjok]

@Akryum could you please advise on how to do this in NUXT 3? Thank you.