I want to add a v-tooltip to the v-btn I'm using to trigger the datepicker for a my charting application. Here is code that is working, before attempting to integrate the tooltip.
<v-menu ref="menu" v-model="menu"
:close-on-content-click="true"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-btn v-on="on"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
With the above, I click the button, I get the datepicker, all is good. I have tried a bunch of different ways to add a v-tooltip, e.g. wrapping the whole block, wrapping just the template and wrapping just the button. Wherever I place the tooltip code, it breaks the whole setup in that either the button doesn't show or the click on it isn't processed.
Buttons being ideal for tooltips, to reveal their functionality without having to click to find out, this seems like a reasonable thing to do. It is easy to use v-btn to trigger lists, but I find very few examples of people using buttons to display datepickers, even though lots of people are asking questions online about it. I'm hoping there is a technique for tooltips that can be used with a variety of pickers actuated from .
Any ideas?
Fixed it for you, try now:
Demo: https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
v-on="{ ...tooltip, ...menu }"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
Related
I'm working with Vue.js 2 and Vuetify 2.2.28 (I've already tried to upgrade in Vuetify 2.6 but I have the same issue), I'm trying to apply the "attach" property to the v-menu of a v-date-picker, to keep the calendar attach to his input when I scroll the dialog.
The attach property works on my datepickers outside the dialog, and it also work on my v-select inside the dialog, but I don't understand why it doesn't work with my datepickers inside the dialog :
<v-col md="8">
<v-menu
ref="menuDateEnd"
v-model="addEndDateTrigger"
:close-on-content-click="false"
transition="scale-transition"
max-width="290"
attach
>
<template v-slot:activator="{ on }">
<v-text-field
:value="addUserForm.endDate | date"
label="Date de fin"
readonly
color="ilgprimary"
v-on="on"
hide-details
clearable
#click:clear="clearAddDateEnd"
/>
</template>
<v-date-picker v-model="addUserForm.endDate" scrollable locale="fr" color="ilgprimary" header-color="ilgsecondary" #change="checkEndDate()">
</v-date-picker>
</v-menu>
</v-col>
I've also tried to put an ID to my v-col and attach the datepicker to it doing attach="#my-col-id" but it doesn't work too.
Someone know how to fix this please ?
I'm trying to open a little popup floating menu when an element is clicked with Vuetify (2.5.0) and Vue (2.6.12) e.g.
<v-menu bottom offset-y>
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on"></div>
</template>
<div>My popup floating content..</div>
</v-menu>
...but I'm not sure how the activator should work with the click event. I'm not using v-btn as the activator for a reason. The vuetify docs give examples, but they always use v-btn e.g. instead of the div in the activator slot above, it's <v-btn v-bind="attrs" v-on="on">A Menu</v-btn>.
You could destruct the on slot prop to get the click event and then use it in your div :
<v-menu bottom offset-y>
<template v-slot:activator="{ on:{click}, attrs }">
<div v-bind="attrs" #click="click">show menu</div>
</template>
<div>My popup floating content..</div>
</v-menu>
There is an example in Vutetify documentation (https://vuetifyjs.com/en/components/date-pickers/#dialog-and-menu). That example has next template code snippet:
...
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="auto"
>
...
<v-date-picker
v-model="date"
no-title
scrollable
>
...
<v-btn
text
color="primary"
#click="$refs.menu.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
It looks like that when a button click ( #click="$refs.menu.save(date)" ) occurs, some 'save' method of the v-menu component is called. But where is it possible to see information about Vuetify component methods and particularly about that menu save method?
The save() method is provided by the Returnable mixin, which allows control over the value returned by the return-value property.
You can see its source code here.
Is it possible to have Vuetify's v-tooltip with a clickable link?
At this point using the default code provided by documentation
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>mdi-home</v-icon>
</template>
clickable link
</v-tooltip>
We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?
You have 2 problems to solve:
Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...
By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...
template
<v-tooltip bottom close-delay="2000">
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
clickable link
</v-tooltip>
style
.v-tooltip__content {
pointer-events: initial;
}
Demo
You can control visibility by using v-model on the tooltip.
The following is taken from vuetifys example on visibility:
<v-tooltip
v-model="show"
top
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon color="grey lighten-1">
mdi-cart
</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
And then define show in data:
show: false
https://vuetifyjs.com/en/components/tooltips/#visibility
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
fab
color="green"
v-on="on"
bottom
right
fixed
:loading="isRefreshing"
#click="refreshFiles"
>
<v-icon color="white">mdi-sync</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
<template v-for="item in menuItems">
<v-btn
v-if="item.isVisible"
:key="item.title"
icon
#click="goToRoute({ name: item.name, params: item.params })"
>
<span>{{ item.title }}</span>
<v-icon>{{ item.icon }}</v-icon>
</v-btn>
</template>
<v-btn icon #click="toProfileEdit">
<span>Profile</span>
<v-icon>mdi-account</v-icon>
</v-btn>
</v-bottom-navigation>
I am using vuejs with vuetify, I have one query where I am stuck, The issue is I am using bottom navigation bar to route to various components(pages), and each page has a floating action button in right bottom, The issue the floating action button is getting hide inside the bottom navigation bar.
Is there any idea or way on how to overcome this issue ??
Any help with example would be appreciated ..
As you can see the green button is getting hide behind bottom nav bar.
Try out to use an inline style :
<v-btn style="z-index:100; bottom:72px;" fab ...