I have a text that displays when I hover a button.
What I'd like is to set the tooltip a bit away from the button (without changing the button's size) because at the moment, it's appearing a bit on the button, they are way too close together.
<v-btn
v-if="
crosshairToggle &&
(tn.length > 10 || tn.length == 0)"
elevation="0"
id="zoom_out"
ref="zoomout"
class="zmbtn minus"
dark
width="45px"
>
<v-tooltip
right
open-delay="500"
>
<template v-slot:activator="{ on }">
<v-icon v-on="on" class="zoom-icon" :color="textLightGrey">
mdi-image-filter-center-focus
</v-icon>
</template>
<span>Focus Mode - Enables when 10 or less actors are mapped</span>
</v-tooltip>
And since the tooltip is only appearing when I'm hovering the button, I can't inspect it. Does anyone know how to set margins on tooltips ?
I believe the prop you are looking for is nudge-top (or nudge-bottom). Take a look at the v-tooltip API page.
Example:
<v-tooltip
right
open-delay="500"
:nudge-top="-50"
>
Related
I'm using a Vuetify v-menu to display a choice of country. Next to the v-chip title is a down chevron. When I click the chip to activate the menu, I want the chevron to change to an up chevron. I want to toggle the v-icon when the slot is active. I've tried various flavors and I could swear I got this code off a working project. But the icon never changes.
<template v-slot:activator="{ on }">
<v-chip label v-on="on" class="mr-2">
U.S. CANADA & CROSS BORDERS
<v-icon right v-if="on">mdi-chevron-up</v-icon>
<v-icon right v-else>mdi-chevron-down</v-icon>
</v-chip>
</template>
If on is the event, how do I get at the isActive property?
activator has another property called value which is boolean :
<template v-slot:activator="{ on,value }">
<v-chip label v-on="on" class="mr-2">
U.S. CANADA & CROSS BORDERS
<v-icon right v-if="value">mdi-chevron-up</v-icon>
<v-icon right v-else>mdi-chevron-down</v-icon>
</v-chip>
</template>
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
I wanted to make a custom button that basically when clicked on would make a v-data-table pop out below it. I am basically making a data table show up when a button is clicked and using this transition
https://vuetifyjs.com/en/styles/transitions/#scale
But the transition sort of makes the table go to the right more and also has an active state with a background with opacity, basically there is a lot of built in styles that are making it hard to make a table drop down below the button as the default behavior is when you click on the transition, the item that pops up covers the button.
Below is the code that causes this
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
Scrolling Y Transition
</v-btn>
</template>
<v-data-table> </v-data-table>
</v-menu>
Is there a better way to implement this?
I don't recommend using menu. Maybe you are looking for this kind of animation.
<v-btn #click="show = !show">
{{ show ? 'Hide' ? 'Show' }}
</v-btn>
<v-expand-transition>
<div v-show="show">
<v-table></v-table>
</div>
</v-expand-transition>
And in the script
data() {
return {
show: false
}
}
You should use the native props for v-menu to reposition the menu how you like. See this snippet: https://codepen.io/bgtor/pen/BaWdBMO .
Note the use of offset-y which allow you to offset the menu on the Y axis, and bottom which tell it to offset to the bottom. Also, nudge-left="200px" is translating the menu to the left by "200px". You can find more props for customisation on the vuetify site: https://vuetifyjs.com/en/api/v-menu/.
Other than that, I agree with #scar-2018, it seems odd to display a table in a menu.
Vuetify v-menu has open-on-hover property.
Using this, user can use menus using hover instead of clicking.
This hover menu close when itself clicked.
I want to set menu which have optional hidden area.
So, i need a hover menu can be clicked without closing.
Is there any way to do this?
thank you in advance.
this is my sample code.
<v-menu open-on-hover>
<template v-slot:activator="{ on }">
<span>hover menu</span>
</template>
<!-- v-menu content -->
<v-card>
<v-btn #click="hiddenarea = true">open</v-btn>
<!-- hiddenarea -->
<span v-if="hiddenarea">Here is hidden area</span>
</v-card>
</v-menu>
Menu Component -Vuetify.js
You can use close-on-content-click for that
<v-menu open-on-hover :close-on-content-click="false">
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>