vuetify
vuetify copied to clipboard
fix(VTooltip): tooltip overlay interfering with VMenu
Description
fixes https://github.com/vuetifyjs/vuetify/issues/15784 v-tooltip overlay should not be on global stack by default
Motivation and Context
How Has This Been Tested?
Playground.vue
Markup:
<v-app>
<v-container>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ props: menu }">
<v-tooltip location="top">
<template v-slot:activator="{ props: tooltip }">
<v-btn color="primary" v-bind="mergeProps(menu, tooltip)">
Left Dropdown
</v-btn>
</template>
<span>Left Tooltip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<span class="mr-4"></span>
<v-menu>
<template v-slot:activator="{ props: menu }">
<v-tooltip location="top">
<template v-slot:activator="{ props: tooltip }">
<v-btn color="primary" v-bind="mergeProps(menu, tooltip)">
Right Dropdown
</v-btn>
</template>
<span>Right Tooltip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-container>
</v-app>
</template>
<script>
import { mergeProps } from "vue";
export default {
name: "Playground",
setup() {
const items = [
{ title: "Click Me1" },
{ title: "Click Me2" },
{ title: "Click Me3" },
{ title: "Click Me4" },
];
return {
mergeProps,
items,
};
},
};
</script>
Types of changes
- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)
Checklist:
- [x] The PR title is no longer than 64 characters.
- [x] The PR is submitted to the correct branch (
master
for bug fixes and documentation updates,dev
for new features and backwards compatible changes andnext
for non-backwards compatible changes). - [x] My code follows the code style of this project.
- [ ] I've added relevant changes to the documentation (applies to new features and breaking changes in core library)