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

@@ -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

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}>