fix: use native titles on interactive elements, keep JS tooltips for non-clickable hints

Author: duruer

src/panel/components/StaffRow.svelte

@@ -6,7 +6,7 @@
         type="button"
         class="btn btn-link px-2"
         data-bs-toggle="dropdown"
-        use:tooltip={[$_('common.actions') || 'Actions']}
+        title={$_('common.actions') || 'Actions'}
         aria-label={$_('common.actions') || 'Actions'}>
         <span class="fas fa-ellipsis-v"></span>
       </button>
@@ -34,7 +34,7 @@
       type="button"
       class="btn btn-link p-1 focus-ring rounded-pill d-inline-flex align-items-center gap-2 text-decoration-none"
       on:click={() => onEdit(member)}
-      use:tooltip={[$_('common.edit')]}>
+      title={$_('common.edit')}>
       {#if member.avatarUrl}
         <img
           src={member.avatarUrl}
@@ -67,7 +67,6 @@
 
 <script>
   import { _ } from '../../main';
-  import tooltip from '@panomc/sdk/utils/tooltip';
 
   export let member;
   export let onEdit;

src/panel/modals/AddEditStaffModal.svelte

@@ -124,7 +124,7 @@
                   type="button"
                   class="btn-close"
                   on:click={() => removeSocial(i)}
-                  use:tooltip={[$_('common.remove')]}
+                  title={$_('common.remove')}
                   aria-label={$_('common.remove')}>
                 </button>
               </div>
@@ -214,7 +214,6 @@
   import { _ } from '../../main';
   import ApiUtil from '@panomc/sdk/utils/api';
   import { showToast } from '@panomc/sdk/toasts';
-  import tooltip from '@panomc/sdk/utils/tooltip';
 
   let saving = false;
 

src/theme/components/StaffList.svelte

@@ -43,7 +43,7 @@
               href={url.startsWith('http') ? url : '#'}
               target="_blank"
               class="btn btn-sm btn-link link-secondary"
-              use:tooltip={[platform]}
+              title={platform}
               aria-label={platform}>
               <i class={getSocialIcon(platform)}></i>
             </a>
@@ -73,7 +73,7 @@
                 href={url.startsWith('http') ? url : '#'}
                 target="_blank"
                 class="social-link"
-                use:tooltip={[platform]}
+                title={platform}
                 aria-label={platform}>
                 <i class={getSocialIcon(platform)}></i>
               </a>
@@ -103,7 +103,7 @@
                   href={url.startsWith('http') ? url : '#'}
                   target="_blank"
                   class="text-white opacity-75 hover-opacity-100"
-                  use:tooltip={[platform]}
+                  title={platform}
                   aria-label={platform}>
                   <i class={getSocialIcon(platform)}></i>
                 </a>
@@ -119,7 +119,6 @@
 <script>
   import { _ } from '../../main';
   import { NoContent } from '@panomc/sdk/components/theme';
-  import tooltip from '@panomc/sdk/utils/tooltip';
 
   export let staff = [];
   export let viewMode = 'CARD';