From 41bd3d8e0ed953be3b1ffd5d49891e23b9dc592a Mon Sep 17 00:00:00 2001
From: Liet Blue <127093491+lietblue@users.noreply.github.com>
Date: Thu, 5 Mar 2026 03:22:45 +0800
Subject: [PATCH] fix(stage-tamagotchi): improve controls island tooltip
 placement (#1119)

---
 .../controls-island/control-button-tooltip.vue              | 6 +++++-
 .../components/stage-islands/controls-island/index.vue      | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
index 83536fdcc..57b3b31db 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/control-button-tooltip.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
+
+const { side = 'top' } = defineProps<{
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}>()
 </script>
 
 <template>
@@ -20,7 +24,7 @@ import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 're
             'rounded-lg backdrop-blur-md',
             'text-xs',
           ]"
-          side="left"
+          :side="side"
           :side-offset="4"
         >
           <slot name="tooltip" />
diff --git a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
index c6bb232a5..e3618985b 100644
--- a/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue
@@ -179,7 +179,7 @@ function refreshWindow() {
 
       <!-- Main Controls -->
       <div flex flex-col gap-1>
-        <ControlButtonTooltip>
+        <ControlButtonTooltip side="left">
           <ControlButton :button-style="adjustStyleClasses.button" @click="expanded = !expanded">
             <div
 
@@ -194,7 +194,7 @@ function refreshWindow() {
           </template>
         </ControlButtonTooltip>
 
-        <ControlButtonTooltip>
+        <ControlButtonTooltip side="left">
           <ControlButton :button-style="adjustStyleClasses.button" cursor-move :class="{ 'drag-region': isLinux }" @mousedown="startDraggingWindow?.()">
             <div i-ph:arrows-out-cardinal :class="adjustStyleClasses.icon" text="neutral-800 dark:neutral-300" />
           </ControlButton>