vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(VTooltip): tooltip overlay interfering with VMenu

Open LucasLeandro1204 opened this issue 1 year ago • 0 comments

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 and next 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)

LucasLeandro1204 avatar Oct 19 '22 20:10 LucasLeandro1204