I am creating a tooltip that appears when an icon is clicked or hovered on; I am using a v-card inside the tooltip:
<v-tooltip bottom min-width="15%">
<template v-slot:activator="{ on, attrs }">
<v-icon small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card flat height="100%" width="100%" class="ma-0 pa-0">
<v-card-text>
Tooltip Text is here
</v-card-text>
</v-card>
</v-tooltip>
The v-card does not fill the tooltip entirely. How do I make the v-card fill the entire tooltip?
It should be better to use <v-menu> tag with open-on-hover prop instead of <v-tooltip>.
Example:
<v-menu
open-on-hover
offset-y
:close-on-content-click="false"
>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card>
...your card data
</v-card>
</v-menu>
Codepen working example
You can easily fill your entire tooltip as I mention there cards are not used here it's made on sheet which could be filled with span tag inside span Whatever you want to write you can...
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon color="primary"
dark
v-bind="attrs"
v-on="on" left>
mdi-information
</v-icon>
</template>
<span>Bottom tooltip</span>
</v-tooltip>
Add this to the v-tooltip content-class="pa-0". You need to override the padding: 5px 16px; that's on .v-tooltip__content. Reference to Vuetify docs on why you use content-class instead of class (detached element like v-dialog and v-menu).
Related
I'am new on VueJS/Vuetify
There is some transparent space above and below the card inside a menu element
There is the code:
<!-- Menu with card-->
<v-menu
offset-overflow
bottom
left
min-width="200"
offset-y
origin="top right"
transition="scale-transition"
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
>
<template v-slot:activator="{ attrs, on }">
<v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
<v-icon>mdi-airplane</v-icon>
</v-btn>
</template>
<v-card shaped color="red">
<v-list color="transparent">
<v-list-item>
<v-list-item-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
<v-list-item-subtitle>Founder of Vuetify</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text #click="menu = false"> Cancel </v-btn>
<v-btn color="primary" text #click="menu = false"> Save </v-btn>
</v-card-actions>
</v-card>
</v-menu>
I omitted irrelevant code from the components.
I used the shaped prop in v-card and red color to better show the problem
Additionally I checked with vue tools the component so measures are 267 x 230.6
And measures are 267 x 185.6
Does anybody know what I can do to remove the space?
Any help is appreciated. Thank you!
Check this codesandbox I made: https://codesandbox.io/s/stack-73563245-v-menu-rounded-corners-erqlii?file=/src/components/Example.vue
I tried your code but I didn't get those paddings at top and bottom. Just some addtional spaces in top-left and bottom-right corners.
A quick fix for this is just apply the rounded helper classes to your v-menu like this: content-class="rounded-br-xl rounded-tl-xl"
I you want to add some space between the menu and the button just use the nudge-top props and set a negative value to it like: nudge-top="-10"
I attempted doing this like in the documentation
https://vuetifyjs.com/en/components/tooltips/
<v-tooltip color="black" bottom >
<template v-slot:activator="{ on, attrs }">
<v-switch
v-model="boo"
v-bind="attrs"
v-on="on"
inset
>
</v-switch>
</template>
<div>
Tooltip
</div>
</v-tooltip>
here :
https://codepen.io/julienreszka/pen/BazvmYN
But the tooltip isn't displayed and the css is wrong.
not really sexy, but you can wrap your switch in a div
<div
v-on="on"
v-bind="attrs">
<v-switch
v-model="boo"
></v-switch>
</div>
v-tooltip is label of v-switch
<v-switch
v-model="boo"
inset>
<template v-slot:label>
<v-tooltip color="black" bottom>
<template v-slot:activator="{ on, attrs }">
<span
v-bind="attrs"
v-on="on">switch label</span>
</template>
Tooltip
</v-tooltip>
</template>
</v-switch>
switches document
I am using the Vuetify Tooltip component. I want to display the tooltip icon right after the label. I am not sure how can I do that. Please help me figure that out. Right now the icon appears as in image 1
I want it right after the information text.
<v-container fluid>
<v-layout row wrap>
<v-flex xs11 md6 class="add-col-padding-right">
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
</v-flex>
<v-flex xs1 md6 class="add-col-padding-left">
<v-tooltip attach>
<a href='javascript:void(0);' slot="activator">
<i class="material-icons icon-black">
info
</i>
</a>
<span>Please enter the user information correctly.</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
Update
<v-text-field
label='Information'
v-model='dummy.info'
>
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
</v-tooltip>
</template>
</v-text-field>
Update 2
If I put v-tooltip inside then it doesn't work. I want the icon to after right after information.
<v-tooltip right>
<v-icon slot="activator" dark color="primary">info</v-icon>
<span>Please enter the user information correctly.</span>
</v-tooltip>
<v-text-field
label='Information'
v-model='dummy.info'
>
</v-text-field>
Use the append slot for the v-text-field component. Inside of the v-text-field component, this should work for you:
<template v-slot:append>
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on">mdi-pencil</v-icon>
</template>
<v-tooltip>
</template>
Edit: You may not have material design icons configured with Vuetify like I do.
Try this, sorry about the confusion.
<v-text-field>
<template v-slot:append>
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-btn v-on="on">test</v-btn>
</template>
<span>Hello World</span>
</v-tooltip>
</template>
</v-text-field>
This should put a v-btn at the end of the text field with a tooltip that reads 'Hello World'
I have the below template (no need to put the here for the purpose of this question):
<template>
<div>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<v-btn icon slot="activator" #click="openConsole">
<v-icon>computer</v-icon>
</v-btn>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
I want a tooltip to be shown whenever mouse hovers on the Console Icon button.
What am I missing here?
Is there an issue with tooltip on Icons inside v-card-actions ?
I looked at this reference https://codepen.io/anon/pen/MOLjVz?editors=1010 but couldn't apply it in my code
Perhaps you're using a newer vuetify version which has different syntax? Try this:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
Check out Vuetify docs for more details
Found the solution myself:
need to add data-app attribute at the root div component:
<div data-app>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</div>
I have a button that is the activator for a dialog in my template. But I also want to use a tooltiop with the button. (Said otherwise, when I hover over the button I'd like to see the v-tooltip and when I click the button I'd like to open the dialog.)
I've tried to use the "append" slot on the tooltip but no success. When I add the append slot, the button completely vanishes from the rendered page.
Is it even possible to use a v-tooltip with a v-dialog in veutify?
This is what I have that does not work.
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-app>
<v-dialog v-model="showAddPopup" persistent max-width="600px">
<v-tooltip slot="append" bottom>
<v-btn slot="activator" absolute fab dark left color="primary" #click="showPopup=true">
<v-icon dark>add</v-icon>
</v-btn>
<span>Tooltip</span>
</v-tooltip>
<app-add-new-evaluator-modal #closePopup="closePopup($event)" #submit="addNewEvaluator" />
</v-dialog>
</v-app>
The Vuetify docs explain how to do this, but you'll find it in the Menu Component:
https://vuetifyjs.com/en/components/menus#menu-with-activator-and-tooltip
Here's a simple example which opens a dialog with a button that has a tooltip:
<v-dialog>
<template #activator="{ on: dialog }">
<v-tooltip>
<template #activator="{ on: tooltip }">
<v-btn v-on="{ ...tooltip, ...dialog }">Button</v-btn>
</template>
<span>Tooltip text</span>
</v-tooltip>
</template>
<v-card>
Dialog content
</v-card>
</v-dialog>
Thanks #Traxo. All I had to do was add the slot="activator"to both components for it to work.
⚠️ ⚠️ problem with this solution, menu gets closed when you click anywhere on it ⚠️ ⚠️
Use this only if you can afford it to close anywhere you click:
<template>
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn v-bind="attrs" v-on="{ ...tooltip, ...menu }" fab>
<v-icon>mdi-account-multiple-plus</v-icon>
</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</template>
<v-card>
<v-card-title class="headline grey lighten-2">
title
</v-card-title>
<v-card-text>
text
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text #click="dialog = false">
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</template>