fix(stage-tamagotchi): disable hoverable content of control button (#1240)

Co-authored-by: 雨落 <53731501+qyl27@users.noreply.github.com>
Co-authored-by: Garfield Lee <3471836+Garfield550@users.noreply.github.com>

apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue

@@ -119,7 +119,7 @@ function refreshWindow() {
       >
         <div v-if="expanded" border="1 neutral-200 dark:neutral-800" mb-2 flex flex-col gap-1 rounded-2xl p-2 backdrop-blur-xl class="bg-neutral-100/80 shadow-2xl shadow-black/20 dark:bg-neutral-900/80">
           <div grid grid-cols-3 gap-2>
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" @click="openSettings">
                 <div i-solar:settings-minimalistic-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
               </ControlButton>
@@ -128,7 +128,7 @@ function refreshWindow() {
               </template>
             </ControlButtonTooltip>
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" @click="openChat">
                 <div i-solar:chat-line-line-duotone :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
               </ControlButton>
@@ -137,7 +137,7 @@ function refreshWindow() {
               </template>
             </ControlButtonTooltip>
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" @click="refreshWindow">
                 <div i-solar:refresh-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
               </ControlButton>
@@ -146,7 +146,7 @@ function refreshWindow() {
               </template>
             </ControlButtonTooltip>
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" @click="toggleDark()">
                 <Transition name="fade" mode="out-in">
                   <div v-if="isDark" i-solar:moon-outline :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
@@ -158,7 +158,7 @@ function refreshWindow() {
               </template>
             </ControlButtonTooltip>
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlsIslandHearingConfig v-model:show="hearingDialogOpen">
                 <div class="relative">
                   <ControlButton :button-style="adjustStyleClasses.button">
@@ -174,7 +174,7 @@ function refreshWindow() {
               </template>
             </ControlButtonTooltip>
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" @click="toggleAlwaysOnTop()">
                 <div v-if="alwaysOnTop" i-solar:pin-bold :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
                 <div v-else i-solar:pin-linear :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300 opacity-50" />
@@ -186,7 +186,7 @@ function refreshWindow() {
 
             <ControlsIslandFadeOnHover :icon-class="adjustStyleClasses.icon" :button-style="adjustStyleClasses.button" />
 
-            <ControlButtonTooltip>
+            <ControlButtonTooltip disable-hoverable-content>
               <ControlButton :button-style="adjustStyleClasses.button" hover:bg-red-500 hover:text-white @click="closeWindow()">
                 <div i-solar:close-circle-outline :class="adjustStyleClasses.icon" />
               </ControlButton>