From 8038682bb56034ca6702fd96ddd0721f785e122b Mon Sep 17 00:00:00 2001
From: Fatuma Abdullahi <67555014+FatumaA@users.noreply.github.com>
Date: Mon, 6 Apr 2026 16:52:40 +0300
Subject: [PATCH] fix: add tooltip, replace button with Tooltip one (#44526)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Adds a tooltip for the account settings button

## What is the current behavior?

It has no tooltip

Closes #44524

## What is the new behavior?

Has Tooltip

## Additional context

<img width="552" height="167" alt="Screenshot 2026-04-03 at 22 21 35"
src="https://github.com/user-attachments/assets/e41caee7-e688-4bd9-8823-0c47133c5470"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Improved interface usability by adding descriptive tooltips to
dropdown menu triggers in the studio. The settings dropdown trigger now
displays a "Settings" tooltip, while the user account dropdown trigger
displays "Account settings" to provide clearer guidance, help users
navigate key interface controls, and enhance the overall user
experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
---
 apps/studio/components/interfaces/LocalDropdown.tsx | 6 ++++--
 apps/studio/components/interfaces/UserDropdown.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/LocalDropdown.tsx b/apps/studio/components/interfaces/LocalDropdown.tsx
index c8a0252cbe5..08384f772ad 100644
--- a/apps/studio/components/interfaces/LocalDropdown.tsx
+++ b/apps/studio/components/interfaces/LocalDropdown.tsx
@@ -17,6 +17,7 @@ import {
 } from 'ui'
 import { useSetCommandMenuOpen } from 'ui-patterns'
 
+import { ButtonTooltip } from '../ui/ButtonTooltip'
 import { useFeaturePreviewModal } from './App/FeaturePreview/FeaturePreviewContext'
 import { ProfileImage } from '@/components/ui/ProfileImage'
 
@@ -34,12 +35,13 @@ export const LocalDropdown = ({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger className={cn('border flex-shrink-0 px-3', triggerClassName)} asChild>
-        <Button
+        <ButtonTooltip
           type="default"
           className="[&>span]:flex px-0 py-0 rounded-full overflow-hidden h-8 w-8"
+          tooltip={{ content: { text: 'Settings' } }}
         >
           <ProfileImage className="w-8 h-8 rounded-md" />
-        </Button>
+        </ButtonTooltip>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="bottom" align="end" className={cn('w-44', contentClassName)}>
         <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx
index 9a8ebadcb10..1641525e977 100644
--- a/apps/studio/components/interfaces/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown.tsx
@@ -18,6 +18,7 @@ import {
   Theme,
 } from 'ui'
 
+import { ButtonTooltip } from '../ui/ButtonTooltip'
 import { useFeaturePreviewModal } from './App/FeaturePreview/FeaturePreviewContext'
 import { ProfileImage } from '@/components/ui/ProfileImage'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
@@ -43,9 +44,10 @@ export function UserDropdown({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild className={cn('border flex-shrink-0 px-3', triggerClassName)}>
-        <Button
+        <ButtonTooltip
           type="default"
           className="[&>span]:flex px-0 py-0 rounded-full overflow-hidden h-8 w-8"
+          tooltip={{ content: { text: 'Account settings' } }}
         >
           {isLoading ? (
             <div className="w-full h-full flex items-center justify-center">
@@ -54,7 +56,7 @@ export function UserDropdown({
           ) : (
             <ProfileImage alt={username} src={avatarUrl} className="w-8 h-8 rounded-md" />
           )}
-        </Button>
+        </ButtonTooltip>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent side="bottom" align="end" className={contentClassName}>