I would like to simplify the usage of the Vuetify tooltip. Instead of this:
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon v-bind="attrs" v-on="on">mdi-home</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
I would like something like this:
<v-icon tooltip="Tooltip" tooltip-position="bottom">mdi-home</v-icon>
As far as I know, Vuetify doesn't have this ability, but can it be achieved with a custom plugin or something else?
You can create a custom tooltip component by puttin a wrapper on this vuetify tooltip, passing all the content as props and displaying accordingly.
OR a simple solution would be use some external library e.g.
https://github.com/hekigan/vue-directive-tooltip
vue-directive-tooltip has the same syntax as you mentioned above.
You could also use the BootstrapVue directive, which is already part of the library.
<template>
<div class='main'>
<b-button v-b-tooltip.hover.right="'Tooltip!'" variant="primary"
>hover</b-button
>
</div>
</template>
This directive can be used in vuetify components like v-icon or v-botton or any other.
You need a CSS code like the one below:
<style>
.main {
display:flex;
justify-content:space-around;
}
</style>