fix responsiveness of tooltip

ohcnetwork · May 22, 2024 · b3ecfa4 · b3ecfa4
1 parent c164ab7
commit b3ecfa4
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/Components/CameraFeed/FeedControls.tsx b/src/Components/CameraFeed/FeedControls.tsx
@@ -87,6 +87,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Up"
               shortcut={Shortcuts.MoveUp}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="rotate-0" />
             </FeedButton>
@@ -102,6 +103,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Left"
               shortcut={Shortcuts.MoveLeft}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-1 md:translate-x-0 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="-rotate-90" />
             </FeedButton>
@@ -114,6 +116,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               shortcut={Shortcuts.TogglePrecision}
               className="font-bold"
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-20 md:translate-x-0 md:translate-y-0"
             >
               {precision}x
             </FeedButton>
@@ -125,6 +128,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Right"
               shortcut={Shortcuts.MoveRight}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-2 md:translate-x-0 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="rotate-90" />
             </FeedButton>
@@ -142,7 +146,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Down"
               shortcut={Shortcuts.MoveDown}
               shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="tooltip-top"
+              tooltipClassName="-translate-y-20 -translate-x-2 md:-translate-x-14"
             >
               <CareIcon icon="l-triangle" className="rotate-180" />
             </FeedButton>