Merge pull request #1391 from Wizleap-Inc/feat/tooltip-zindex

Feat/tooltip-zindex
Wizleap-Inc · Oct 28, 2024 · d37d635 · d37d635
2 parents 910e034 + 05d4af9
commit d37d635
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/plenty-birds-hear.md b/.changeset/plenty-birds-hear.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-constants": minor
+"@wizleap-inc/wiz-ui-next": patch
+"@wizleap-inc/wiz-ui-react": patch
+---
+
+Fix: tooltip を dropdown より上に表示する
diff --git a/packages/constants/styles/z-index.ts b/packages/constants/styles/z-index.ts
@@ -13,13 +13,17 @@ export const Z_INDEX_MAP = {
    */
   dialog: "2000",
   /**
-   * dropdown(選択系),tooltip(情報系),alert
+   * dropdown(選択系), alert
    */
   popover: "3000",
+  /**
+   * tooltip(情報系)
+   */
+  tooltip: "4000",
   /**
    * overlay(全画面系)
    */
-  overlay: "4000",
+  overlay: "5000",
 } as const;
 
 export type ZIndexKeys = keyof typeof Z_INDEX_MAP;

diff --git a/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue b/packages/wiz-ui-next/src/components/base/tooltip/tooltip.vue
@@ -15,6 +15,7 @@
         :animation="true"
         @onTurn="turnPopup"
         gap="xs2"
+        layer="tooltip"
         :isDirectionFixed="isDirectionFixed"
       >
         <div
@@ -38,14 +39,14 @@
 <script setup lang="ts">
 import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import {
-  tooltipStyle,
   tooltipContentStyle,
-  tooltipIconStyle,
   tooltipIconDirectionStyle,
-  tooltipPositionStyle,
+  tooltipIconStyle,
   tooltipPopupStyle,
+  tooltipPositionStyle,
+  tooltipStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/tooltip.css";
-import { PropType, ref, computed } from "vue";
+import { computed, PropType, ref } from "vue";
 
 import { WizIChangeHistory, WizPopup, WizPopupContainer } from "@/components";
 

diff --git a/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx b/packages/wiz-ui-react/src/components/base/tooltip/components/tooltip.tsx
@@ -56,6 +56,7 @@ const Tooltip: FC<Props> = ({
         shadow={false}
         animation
         gap="xs2"
+        layer="tooltip"
         isDirectionFixed={isDirectionFixed}
       >
         <div