diff --git a/src/components/common/pin-toggler.vue b/src/components/common/pin-toggler.vue
index aa31eadb..76a5bec4 100644
--- a/src/components/common/pin-toggler.vue
+++ b/src/components/common/pin-toggler.vue
@@ -17,7 +17,7 @@ const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
   <ButtonIcon
     :tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
     tooltip-placement="bottom-start"
-    trigger-parent
+    :z-index="100"
   >
     <SvgIcon :icon="icon" />
   </ButtonIcon>
diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
index b786b600..3cf39e59 100644
--- a/src/components/custom/button-icon.vue
+++ b/src/components/custom/button-icon.vue
@@ -17,13 +17,15 @@ interface Props {
   tooltipContent?: string;
   /** Tooltip placement */
   tooltipPlacement?: PopoverPlacement;
+  zIndex?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   class: 'h-36px text-icon',
   icon: '',
   tooltipContent: '',
-  tooltipPlacement: 'bottom'
+  tooltipPlacement: 'bottom',
+  zIndex: 98
 });
 
 interface ButtonProps {
@@ -58,7 +60,7 @@ const cls = computed(() => {
   </DefineButton>
   <!-- define component end: Button -->
 
-  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="98">
+  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
     <template #trigger>
       <Button :class-name="cls" v-bind="$attrs">
         <slot>