improved tooltips

frontend/src/App.tsx

@@ -660,7 +660,7 @@ export default function App() {
                 value={gainModeDb}
                 onChange={(e) => setGainModeDb(Math.max(-24, Math.min(24, Number(e.target.value) || 0)))}
                 className="w-16 px-1.5 py-1 text-xs bg-editor-surface border border-editor-border rounded text-editor-text focus:outline-none focus:border-editor-accent"
-                data-tooltip="Volume adjustment in decibels for new gain zones — positive boosts, negative reduces"
+                title="Volume adjustment in decibels for new gain zones — positive boosts, negative reduces"
                 disabled={!canEdit}
               />
             </div>
@@ -681,7 +681,7 @@ export default function App() {
                 value={speedModeValue}
                 onChange={(e) => setSpeedModeValue(Math.max(0.25, Math.min(4, Number(e.target.value) || 1)))}
                 className="w-16 px-1.5 py-1 text-xs bg-editor-surface border border-editor-border rounded text-editor-text focus:outline-none focus:border-editor-accent"
-                data-tooltip="Playback speed multiplier for new speed zones — 1x is normal, 2x is double speed"
+                title="Playback speed multiplier for new speed zones — 1x is normal, 2x is double speed"
                 disabled={!canEdit}
               />
             </div>
@@ -754,7 +754,7 @@ export default function App() {
             <button
               onClick={handleReprocessProject}
               disabled={isTranscribing || !videoPath || !canEdit}
-              data-tooltip="Re-run transcription with the selected Whisper model — replaces current transcript"
+              title="Re-run transcription with the selected Whisper model — replaces current transcript"
               className="flex items-center gap-1 px-2 py-1 rounded text-xs text-editor-text hover:bg-editor-bg disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <RefreshCw className={`w-3 h-3 ${isTranscribing ? 'animate-spin' : ''}`} />
@@ -984,7 +984,7 @@ function ToolbarButton({
   title?: string;
 }) {
   return (
-    <span data-tooltip={title || label}>
+    <span title={title || label}>
       <button
         onClick={onClick}
         disabled={disabled}
@@ -1015,7 +1015,7 @@ function DropdownItem({
   title?: string;
 }) {
   return (
-    <span data-tooltip={title || label}>
+    <span title={title || label}>
       <button
         onClick={onClick}
         disabled={disabled}

frontend/src/components/AIPanel.tsx

@@ -150,14 +150,14 @@ export default function AIPanel() {
           onClick={() => setActiveTab('filler')}
           icon={<Scissors className="w-3.5 h-3.5" />}
           label="Filler Words"
-          data-tooltip="Detect and remove filler words from transcript"
+          title="Detect and remove filler words from transcript"
         />
         <TabButton
           active={activeTab === 'clips'}
           onClick={() => setActiveTab('clips')}
           icon={<Film className="w-3.5 h-3.5" />}
           label="Create Clips"
-          data-tooltip="Find the best segments for social media clips"
+          title="Find the best segments for social media clips"
         />
       </div>
 
@@ -183,7 +183,7 @@ export default function AIPanel() {
             <button
               onClick={detectFillers}
               disabled={isProcessing || words.length === 0}
-              data-tooltip="Scan the entire transcript for filler words (um, uh, like, you know) and mark for removal"
+              title="Scan the entire transcript for filler words (um, uh, like, you know) and mark for removal"
               className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
             >
               {isProcessing ? (
@@ -208,14 +208,14 @@ export default function AIPanel() {
                   <div className="flex gap-1">
                     <button
                       onClick={applyFillerDeletions}
-                      data-tooltip="Create cut ranges for all detected filler words at once"
+                      title="Create cut ranges for all detected filler words at once"
                       className="flex items-center gap-1 px-2 py-1 text-xs bg-editor-success/20 text-editor-success rounded hover:bg-editor-success/30"
                     >
                       <Check className="w-3 h-3" /> Apply All
                     </button>
                     <button
                       onClick={() => setFillerResult(null)}
-                      data-tooltip="Clear detected filler word results without applying"
+                      title="Clear detected filler word results without applying"
                       className="flex items-center gap-1 px-2 py-1 text-xs bg-editor-border text-editor-text-muted rounded hover:bg-editor-surface"
                     >
                       <X className="w-3 h-3" /> Dismiss
@@ -253,7 +253,7 @@ export default function AIPanel() {
             <button
               onClick={createClips}
               disabled={isProcessing || words.length === 0}
-              data-tooltip="Analyze transcript to find the most engaging 20-60 second segments for social media"
+              title="Analyze transcript to find the most engaging 20-60 second segments for social media"
               className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
             >
               {isProcessing ? (
@@ -283,7 +283,7 @@ export default function AIPanel() {
                     <div className="flex gap-2">
                       <button
                         onClick={() => handlePreviewClip(clip)}
-                        data-tooltip="Seek to this clip's position and play a preview"
+                        title="Seek to this clip's position and play a preview"
                         className="flex-1 flex items-center justify-center gap-1 px-2 py-1.5 text-xs bg-editor-accent/20 text-editor-accent rounded hover:bg-editor-accent/30 transition-colors"
                       >
                         <Play className="w-3 h-3" /> Preview
@@ -291,7 +291,7 @@ export default function AIPanel() {
                       <button
                         onClick={() => handleExportClip(clip, i)}
                         disabled={exportingClipIndex === i}
-                        data-tooltip="Export just this segment as a standalone video file"
+                        title="Export just this segment as a standalone video file"
                         className="flex-1 flex items-center justify-center gap-1 px-2 py-1.5 text-xs bg-editor-success/20 text-editor-success rounded hover:bg-editor-success/30 disabled:opacity-50 transition-colors"
                       >
                         {exportingClipIndex === i ? (

frontend/src/components/AppendClipPanel.tsx

@@ -45,7 +45,7 @@ export default function AppendClipPanel() {
                   onClick={() => reorderAdditionalClip(clip.id, -1)}
                   disabled={idx === 0}
                   className="p-0.5 rounded hover:bg-editor-bg disabled:opacity-30 text-editor-text-muted hover:text-editor-text"
-                  data-tooltip="Move up"
+                  title="Move up"
                 >
                   <ChevronUp className="w-3 h-3" />
                 </button>
@@ -53,7 +53,7 @@ export default function AppendClipPanel() {
                   onClick={() => reorderAdditionalClip(clip.id, 1)}
                   disabled={idx === additionalClips.length - 1}
                   className="p-0.5 rounded hover:bg-editor-bg disabled:opacity-30 text-editor-text-muted hover:text-editor-text"
-                  data-tooltip="Move down"
+                  title="Move down"
                 >
                   <ChevronDown className="w-3 h-3" />
                 </button>
@@ -61,7 +61,7 @@ export default function AppendClipPanel() {
               <button
                 onClick={() => removeAdditionalClip(clip.id)}
                 className="p-0.5 rounded hover:bg-red-500/20 text-red-400"
-                data-tooltip="Remove clip"
+                title="Remove clip"
               >
                 <Trash2 className="w-3 h-3" />
               </button>
@@ -74,7 +74,7 @@ export default function AppendClipPanel() {
         onClick={handleAddClip}
         disabled={!videoPath}
         className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg border-2 border-dashed border-editor-border text-xs text-editor-text-muted hover:text-editor-text hover:border-editor-text-muted disabled:opacity-40 transition-colors"
-        data-tooltip="Select a video or audio file to append during export"
+        title="Select a video or audio file to append during export"
       >
         <Plus className="w-3.5 h-3.5" />
         Add Clip

frontend/src/components/BackgroundMusicPanel.tsx

@@ -38,7 +38,7 @@ export default function BackgroundMusicPanel() {
         <button
           onClick={handleLoadMusic}
           className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 border-dashed border-editor-border text-xs text-editor-text-muted hover:text-editor-text hover:border-editor-text-muted transition-colors"
-          data-tooltip="Select an audio file to use as background music"
+          title="Select an audio file to use as background music"
         >
           <Disc3 className="w-4 h-4" />
           Load Music File
@@ -53,7 +53,7 @@ export default function BackgroundMusicPanel() {
             <button
               onClick={handleRemoveMusic}
               className="p-1 rounded hover:bg-red-500/20 text-red-400 transition-colors"
-              data-tooltip="Remove music"
+              title="Remove music"
             >
               <Trash2 className="w-3 h-3" />
             </button>
@@ -71,7 +71,7 @@ export default function BackgroundMusicPanel() {
                 value={backgroundMusic.volumeDb}
                 onChange={(e) => updateBackgroundMusic({ volumeDb: Number(e.target.value) })}
                 className="flex-1 h-1.5"
-                data-tooltip="Background music volume relative to main audio — positive boosts, negative reduces"
+                title="Background music volume relative to main audio — positive boosts, negative reduces"
               />
               <span className="text-xs text-editor-text w-10 text-right">{backgroundMusic.volumeDb} dB</span>
             </div>
@@ -83,7 +83,7 @@ export default function BackgroundMusicPanel() {
               checked={backgroundMusic.duckingEnabled}
               onChange={(e) => updateBackgroundMusic({ duckingEnabled: e.target.checked })}
               className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
-              data-tooltip="Automatically lower music volume when speech is detected"
+              title="Automatically lower music volume when speech is detected"
             />
             <div>
               <span className="text-xs font-medium">Auto-ducking</span>
@@ -105,7 +105,7 @@ export default function BackgroundMusicPanel() {
                   value={backgroundMusic.duckingDb}
                   onChange={(e) => updateBackgroundMusic({ duckingDb: Number(e.target.value) })}
                   className="flex-1 h-1.5"
-                  data-tooltip="How much to reduce music volume during speech (1-20 dB)"
+                  title="How much to reduce music volume during speech (1-20 dB)"
                 />
                 <span className="text-xs text-editor-text w-10 text-right">{backgroundMusic.duckingDb} dB</span>
               </div>
@@ -119,7 +119,7 @@ export default function BackgroundMusicPanel() {
                   value={backgroundMusic.duckingAttackMs}
                   onChange={(e) => updateBackgroundMusic({ duckingAttackMs: Number(e.target.value) })}
                   className="flex-1 h-1.5"
-                  data-tooltip="How quickly the ducking effect engages when speech starts"
+                  title="How quickly the ducking effect engages when speech starts"
                 />
                 <span className="text-xs text-editor-text w-10 text-right">{backgroundMusic.duckingAttackMs}ms</span>
               </div>
@@ -133,7 +133,7 @@ export default function BackgroundMusicPanel() {
                   value={backgroundMusic.duckingReleaseMs}
                   onChange={(e) => updateBackgroundMusic({ duckingReleaseMs: Number(e.target.value) })}
                   className="flex-1 h-1.5"
-                  data-tooltip="How quickly the ducking effect fades when speech ends"
+                  title="How quickly the ducking effect fades when speech ends"
                 />
                 <span className="text-xs text-editor-text w-10 text-right">{backgroundMusic.duckingReleaseMs}ms</span>
               </div>

frontend/src/components/ExportDialog.tsx

@@ -252,7 +252,7 @@ export default function ExportDialog() {
             { value: '1080p', label: '1080p (Full HD)' },
             { value: '4k', label: '4K (Ultra HD)' },
           ]}
-          data-tooltip="Output video resolution — higher resolution = larger file"
+          title="Output video resolution — higher resolution = larger file"
         />
       )}
 
@@ -267,7 +267,7 @@ export default function ExportDialog() {
           { value: 'webm', label: 'WebM (VP9)' },
           ...(isAudioOnly ? [{ value: 'wav' as const, label: 'WAV (Uncompressed)' }] : []),
         ]}
-        data-tooltip="Output container format — MP4 is most compatible"
+        title="Output container format — MP4 is most compatible"
       />
 
       {/* Video zoom / punch-in */}
@@ -278,7 +278,7 @@ export default function ExportDialog() {
             checked={options.zoom?.enabled || false}
             onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, enabled: e.target.checked } }))}
             className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
-            data-tooltip="Crop and reposition the video frame — useful for removing black bars or reframing"
+            title="Crop and reposition the video frame — useful for removing black bars or reframing"
           />
           <div>
             <span className="text-xs font-medium flex items-center gap-1">
@@ -302,7 +302,7 @@ export default function ExportDialog() {
                 value={options.zoom?.zoomFactor || 1}
                 onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, zoomFactor: Number(e.target.value) } }))}
                 className="flex-1 h-1.5"
-                data-tooltip="Magnification level — 1.0x is original, higher values zoom in"
+                title="Magnification level — 1.0x is original, higher values zoom in"
               />
               <span className="text-xs text-editor-text w-10 text-right">{options.zoom?.zoomFactor?.toFixed(2)}x</span>
             </div>
@@ -316,7 +316,7 @@ export default function ExportDialog() {
                 value={options.zoom?.panX || 0}
                 onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, panX: Number(e.target.value) } }))}
                 className="flex-1 h-1.5"
-                data-tooltip="Horizontal position of the crop window — negative moves left, positive moves right"
+                title="Horizontal position of the crop window — negative moves left, positive moves right"
               />
               <span className="text-xs text-editor-text w-10 text-right">{((options.zoom?.panX || 0) * 100).toFixed(0)}%</span>
             </div>
@@ -330,7 +330,7 @@ export default function ExportDialog() {
                 value={options.zoom?.panY || 0}
                 onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, panY: Number(e.target.value) } }))}
                 className="flex-1 h-1.5"
-                data-tooltip="Vertical position of the crop window — negative moves up, positive moves down"
+                title="Vertical position of the crop window — negative moves up, positive moves down"
               />
               <span className="text-xs text-editor-text w-10 text-right">{((options.zoom?.panY || 0) * 100).toFixed(0)}%</span>
             </div>
@@ -347,7 +347,7 @@ export default function ExportDialog() {
               checked={options.removeBackground || false}
               onChange={(e) => setOptions((o) => ({ ...o, removeBackground: e.target.checked }))}
               className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
-              data-tooltip="Remove or replace the background behind the speaker"
+              title="Remove or replace the background behind the speaker"
             />
             <div>
               <span className="text-xs font-medium flex items-center gap-1">
@@ -416,7 +416,7 @@ export default function ExportDialog() {
             checked={options.normalizeAudio}
             onChange={(e) => setOptions((o) => ({ ...o, normalizeAudio: e.target.checked }))}
             className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
-            data-tooltip="Normalize audio to a consistent loudness target"
+            title="Normalize audio to a consistent loudness target"
           />
           <div>
             <span className="text-xs font-medium">Normalize loudness</span>
@@ -432,7 +432,7 @@ export default function ExportDialog() {
               value={options.normalizeTarget}
               onChange={(e) => setOptions((o) => ({ ...o, normalizeTarget: Number(e.target.value) }))}
               className="flex-1 px-2 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:outline-none focus:border-editor-accent [color-scheme:dark]"
-              data-tooltip="Loudness target — YouTube (-14), Spotify (-16), Broadcast (-23)"
+              title="Loudness target — YouTube (-14), Spotify (-16), Broadcast (-23)"
             >
               <option value={-14}>YouTube (-14 LUFS)</option>
               <option value={-16}>Spotify (-16 LUFS)</option>
@@ -451,7 +451,7 @@ export default function ExportDialog() {
           checked={options.enhanceAudio}
           onChange={(e) => setOptions((o) => ({ ...o, enhanceAudio: e.target.checked }))}
           className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
-          data-tooltip="Apply noise reduction and speech enhancement"
+          title="Apply noise reduction and speech enhancement"
         />
         <span className="text-xs">Enhance audio (Studio Sound)</span>
       </label>
@@ -466,7 +466,7 @@ export default function ExportDialog() {
           { value: 'burn-in', label: 'Burn-in (permanent)' },
           { value: 'sidecar', label: 'Sidecar SRT file' },
         ]}
-        data-tooltip="Burn captions into video, export as separate SRT/VTT file, or none"
+        title="Burn captions into video, export as separate SRT/VTT file, or none"
       />
 
       {/* Transcript-only export */}
@@ -491,7 +491,7 @@ export default function ExportDialog() {
             onClick={handleTranscriptExport}
             disabled={isTranscribingTranscript || words.length === 0}
             className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30 disabled:opacity-40 transition-colors"
-            data-tooltip="Export just the transcript text or subtitles without the video"
+            title="Export just the transcript text or subtitles without the video"
           >
             {isTranscribingTranscript ? (
               <Loader2 className="w-3 h-3 animate-spin" />
@@ -508,7 +508,7 @@ export default function ExportDialog() {
         onClick={handleExport}
         disabled={isExporting || !videoPath}
         className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-semibold transition-colors"
-        data-tooltip="Start export with current settings"
+        title="Start export with current settings"
       >
         {isExporting ? (
           <>

frontend/src/components/LicenseDialog.tsx

@@ -144,7 +144,7 @@ function LicenseActivateDialog({
           <button
             onClick={onClose}
             className="p-1 rounded hover:bg-editor-surface text-editor-text-muted"
-            data-tooltip="Close dialog"
+            title="Close dialog"
           >
             <X className="w-4 h-4" />
           </button>

frontend/src/components/MarkersPanel.tsx

@@ -92,7 +92,7 @@ export default function MarkersPanel() {
         <button
           onClick={addAtCurrentTime}
           className="w-full flex items-center justify-center gap-1 px-2 py-1.5 text-xs bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30 rounded"
-          data-tooltip="Add a marker at the current playhead position"
+          title="Add a marker at the current playhead position"
         >
           <MapPin className="w-3 h-3" />
           Add
@@ -123,8 +123,8 @@ export default function MarkersPanel() {
               ) : (
                 <>
                   <span className="flex-1 truncate">{m.label}</span>
-                  <button onClick={() => startEdit(m.id, m.label)} className="p-0.5 hover:text-editor-accent" data-tooltip="Edit marker label and color"><PencilLine className="w-3 h-3" /></button>
+                  <button onClick={() => startEdit(m.id, m.label)} className="p-0.5 hover:text-editor-accent" title="Edit marker label and color"><PencilLine className="w-3 h-3" /></button>
-                  <button onClick={() => removeTimelineMarker(m.id)} className="p-0.5 hover:text-editor-danger" data-tooltip="Delete this marker"><Trash2 className="w-3 h-3" /></button>
+                  <button onClick={() => removeTimelineMarker(m.id)} className="p-0.5 hover:text-editor-danger" title="Delete this marker"><Trash2 className="w-3 h-3" /></button>
                 </>
               )}
             </div>
@@ -151,7 +151,7 @@ export default function MarkersPanel() {
               <button
                 onClick={exportChapters}
                 className="flex items-center gap-1 text-[10px] text-editor-accent hover:underline"
-                data-tooltip="Copy chapter timestamps to clipboard in YouTube format"
+                title="Copy chapter timestamps to clipboard in YouTube format"
               >
                 <Copy className="w-2.5 h-2.5" />
                 Copy as YouTube timestamps

frontend/src/components/SettingsPanel.tsx

@@ -149,7 +149,7 @@ export default function SettingsPanel() {
               value={zonePreviewPaddingSeconds}
               onChange={(e) => setZonePreviewPaddingSeconds(Number(e.target.value) || 0)}
               className="flex-1 h-1.5"
-              data-tooltip="Extra time in seconds to show before and after each zone during preview"
+              title="Extra time in seconds to show before and after each zone during preview"
             />
             <input
               type="number"
@@ -159,7 +159,7 @@ export default function SettingsPanel() {
               value={zonePreviewPaddingSeconds}
               onChange={(e) => setZonePreviewPaddingSeconds(Number(e.target.value) || 0)}
               className="w-16 px-2 py-1 bg-editor-bg border border-editor-border rounded-lg text-xs text-editor-text focus:outline-none focus:border-editor-accent"
-              data-tooltip="Extra time in seconds to show before and after each zone during preview"
+              title="Extra time in seconds to show before and after each zone during preview"
             />
             <span className="text-xs text-editor-text-muted w-6">s</span>
           </div>
@@ -182,7 +182,7 @@ export default function SettingsPanel() {
             value={confidenceThreshold}
             onChange={(e) => setConfidenceThreshold(Number(e.target.value))}
             className="flex-1 h-1.5"
-            data-tooltip="Words below this confidence get an orange underline — lower values show fewer warnings"
+            title="Words below this confidence get an orange underline — lower values show fewer warnings"
           />
           <input
             type="number"
@@ -192,7 +192,7 @@ export default function SettingsPanel() {
             value={confidenceThreshold}
             onChange={(e) => setConfidenceThreshold(Math.max(0, Math.min(1, Number(e.target.value) || 0)))}
             className="w-16 px-2 py-1 bg-editor-bg border border-editor-border rounded-lg text-xs text-editor-text focus:outline-none focus:border-editor-accent"
-            data-tooltip="Words below this confidence get an orange underline — lower values show fewer warnings"
+            title="Words below this confidence get an orange underline — lower values show fewer warnings"
           />
         </div>
         <div className="flex items-center justify-between text-[10px]">
@@ -212,14 +212,14 @@ export default function SettingsPanel() {
           <button
             onClick={() => applyPresetAction('standard')}
             className="flex-1 px-2 py-1.5 text-xs rounded bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30"
-            data-tooltip="Reset all shortcuts to the Standard preset"
+            title="Reset all shortcuts to the Standard preset"
           >
             Standard Preset
           </button>
           <button
             onClick={() => applyPresetAction('left-hand')}
             className="flex-1 px-2 py-1.5 text-xs rounded bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30"
-            data-tooltip="Reset all shortcuts to the Left-Hand preset"
+            title="Reset all shortcuts to the Left-Hand preset"
           >
             Left-Hand Preset
           </button>
@@ -243,12 +243,12 @@ export default function SettingsPanel() {
                 onKeyDown={(e) => handleKeyCapture(e, i)}
                 className="w-28 px-2 py-1 text-[10px] font-mono bg-editor-bg border border-editor-border rounded text-center focus:outline-none focus:border-editor-accent"
                 placeholder="Type shortcut"
-                data-tooltip="Click then press the desired key combination"
+                title="Click then press the desired key combination"
               />
               <button
                 onClick={() => handleReset(i)}
                 className="text-[10px] text-editor-text-muted hover:text-editor-text px-1"
-                data-tooltip="Reset this shortcut to default"
+                title="Reset this shortcut to default"
               >
                 ↺
               </button>
@@ -311,7 +311,7 @@ export default function SettingsPanel() {
                   onClick={() => handleDeleteModel(m)}
                   disabled={deleting === m.path}
                   className="p-1.5 rounded text-editor-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-40"
-                  data-tooltip="Delete model"
+                  title="Delete model"
                 >
                   <Trash2 className="w-3.5 h-3.5" />
                 </button>
@@ -323,7 +323,7 @@ export default function SettingsPanel() {
           onClick={fetchModels}
           disabled={loadingModels}
           className="text-[10px] text-editor-accent hover:underline flex items-center gap-0.5"
-          data-tooltip="Refresh list of downloaded models"
+          title="Refresh list of downloaded models"
         >
           <RefreshCw className={`w-2.5 h-2.5 ${loadingModels ? 'animate-spin' : ''}`} />
           Refresh
@@ -348,7 +348,7 @@ export default function SettingsPanel() {
               onClick={fetchOllamaModels}
               disabled={loadingOllamaModels}
               className="text-[10px] text-editor-accent hover:underline flex items-center gap-0.5"
-              data-tooltip="Refresh available Ollama models"
+              title="Refresh available Ollama models"
             >
               <RefreshCw className={`w-2.5 h-2.5 ${loadingOllamaModels ? 'animate-spin' : ''}`} />
               Refresh
@@ -359,7 +359,7 @@ export default function SettingsPanel() {
               value={providers.ollama.model}
               onChange={(e) => setProviderConfig('ollama', { model: e.target.value })}
               className="w-full px-3 py-2 bg-editor-surface border border-editor-border rounded-lg text-xs text-white focus:outline-none focus:border-editor-accent"
-              data-tooltip="Which Ollama model to use for AI features"
+              title="Which Ollama model to use for AI features"
             >
               {ollamaModels.map((m) => (
                 <option key={m} value={m}>{m}</option>
@@ -461,7 +461,7 @@ function InputField({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        data-tooltip={title}
+        title={title}
         className="w-full px-3 py-2 bg-editor-bg border border-editor-border rounded-lg text-xs text-editor-text placeholder:text-editor-text-muted/50 focus:outline-none focus:border-editor-accent"
       />
     </div>

frontend/src/components/SilenceTrimmerPanel.tsx

@@ -134,7 +134,7 @@ export default function SilenceTrimmerPanel() {
             value={minSilenceMs}
             onChange={(e) => setMinSilenceMs(Number(e.target.value) || 500)}
             className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-            data-tooltip="Minimum duration of silence to detect in milliseconds"
+            title="Minimum duration of silence to detect in milliseconds"
           />
         </div>
 
@@ -150,7 +150,7 @@ export default function SilenceTrimmerPanel() {
             value={silenceDb}
             onChange={(e) => setSilenceDb(Number(e.target.value) || -35)}
             className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-            data-tooltip="Volume threshold in dB — lower values detect quieter sounds as silence"
+            title="Volume threshold in dB — lower values detect quieter sounds as silence"
           />
         </div>
 
@@ -167,7 +167,7 @@ export default function SilenceTrimmerPanel() {
               value={preBufferMs}
               onChange={(e) => setPreBufferMs(Number(e.target.value) || 0)}
               className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-              data-tooltip="Extra time to add before each detected silence"
+              title="Extra time to add before each detected silence"
             />
           </div>
           <div className="space-y-1.5">
@@ -182,7 +182,7 @@ export default function SilenceTrimmerPanel() {
               value={postBufferMs}
               onChange={(e) => setPostBufferMs(Number(e.target.value) || 0)}
               className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-              data-tooltip="Extra time to add after each detected silence"
+              title="Extra time to add after each detected silence"
             />
           </div>
         </div>
@@ -191,7 +191,7 @@ export default function SilenceTrimmerPanel() {
           onClick={detectSilence}
           disabled={isDetecting || !videoPath}
           className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
-          data-tooltip="Scan the entire audio track for silent pauses"
+          title="Scan the entire audio track for silent pauses"
         >
           {isDetecting ? (
             <>
@@ -219,7 +219,7 @@ export default function SilenceTrimmerPanel() {
                 <button
                   onClick={reapplySelectedGroup}
                   className="flex items-center gap-1 px-2 py-1 text-xs bg-editor-warning/20 text-editor-warning rounded hover:bg-editor-warning/30"
-                  data-tooltip="Re-apply this silence trim group with current settings"
+                  title="Re-apply this silence trim group with current settings"
                 >
                   <RotateCcw className="w-3 h-3" />
                   Reapply Group
@@ -228,7 +228,7 @@ export default function SilenceTrimmerPanel() {
               <button
                 onClick={applyAsNewGroup}
                 className="flex items-center gap-1 px-2 py-1 text-xs bg-editor-accent/20 text-editor-accent rounded hover:bg-editor-accent/30"
-                data-tooltip="Create a new silence trim group from detected pauses"
+                title="Create a new silence trim group from detected pauses"
               >
                 <Scissors className="w-3 h-3" />
                 Apply As New Group
@@ -271,14 +271,14 @@ export default function SilenceTrimmerPanel() {
                       <button
                         onClick={() => loadGroupForEditing(group.id)}
                         className="px-1.5 py-1 rounded hover:bg-editor-accent/20 text-editor-accent"
-                        data-tooltip="Edit and reapply this group"
+                        title="Edit and reapply this group"
                       >
                         <PencilLine className="w-3 h-3" />
                       </button>
                       <button
                         onClick={() => removeGroup(group.id)}
                         className="px-1.5 py-1 rounded hover:bg-editor-danger/20 text-editor-danger"
-                        data-tooltip="Delete all cuts from this group"
+                        title="Delete all cuts from this group"
                       >
                         <Trash2 className="w-3 h-3" />
                       </button>

frontend/src/components/TranscriptEditor.tsx

@@ -511,7 +511,7 @@ export default function TranscriptEditor({
               requestAnimationFrame(() => searchInputRef.current?.focus());
             }}
             className="flex items-center gap-1 px-2 py-1 text-xs text-editor-text-muted hover:text-editor-text hover:bg-editor-surface rounded"
-            data-tooltip="Find (Ctrl+F)"
+            title="Find (Ctrl+F)"
           >
             <Search className="w-3 h-3" />
             Find
@@ -534,21 +534,21 @@ export default function TranscriptEditor({
               <button
                 onClick={() => jumpToMatch(safeActiveMatchIdx - 1)}
                 className="p-0.5 rounded hover:bg-editor-bg text-editor-text-muted hover:text-editor-text"
-                data-tooltip="Previous match (Shift+Enter)"
+                title="Previous match (Shift+Enter)"
               >
                 <ChevronUp className="w-3 h-3" />
               </button>
               <button
                 onClick={() => jumpToMatch(safeActiveMatchIdx + 1)}
                 className="p-0.5 rounded hover:bg-editor-bg text-editor-text-muted hover:text-editor-text"
-                data-tooltip="Next match (Enter)"
+                title="Next match (Enter)"
               >
                 <ChevronDown className="w-3 h-3" />
               </button>
               <button
                 onClick={() => setSearchOpen(false)}
                 className="p-0.5 rounded hover:bg-editor-bg text-editor-text-muted hover:text-editor-text"
-                data-tooltip="Close search (Esc)"
+                title="Close search (Esc)"
               >
                 <X className="w-3 h-3" />
               </button>
@@ -561,7 +561,7 @@ export default function TranscriptEditor({
               onClick={cutSelectedWords}
               disabled={!canEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs bg-red-500/20 text-red-300 rounded hover:bg-red-500/30 transition-colors disabled:opacity-40"
-              data-tooltip="Remove this word range from the output"
+              title="Remove this word range from the output"
             >
               <Scissors className="w-3 h-3" />
               Cut
@@ -570,7 +570,7 @@ export default function TranscriptEditor({
               onClick={muteSelectedWords}
               disabled={!canEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs bg-blue-500/20 text-blue-300 rounded hover:bg-blue-500/30 transition-colors disabled:opacity-40"
-              data-tooltip="Silence audio for this word range"
+              title="Silence audio for this word range"
             >
               <VolumeX className="w-3 h-3" />
               Mute
@@ -579,7 +579,7 @@ export default function TranscriptEditor({
               onClick={gainSelectedWords}
               disabled={!canEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs bg-amber-500/20 text-amber-300 rounded hover:bg-amber-500/30 transition-colors disabled:opacity-40"
-              data-tooltip="Adjust volume for this word range — positive boosts, negative reduces"
+              title="Adjust volume for this word range — positive boosts, negative reduces"
             >
               <SlidersHorizontal className="w-3 h-3" />
               Gain ({gainModeDb > 0 ? '+' : ''}{gainModeDb.toFixed(1)} dB)
@@ -588,7 +588,7 @@ export default function TranscriptEditor({
               onClick={speedSelectedWords}
               disabled={!canEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs bg-emerald-500/20 text-emerald-300 rounded hover:bg-emerald-500/30 transition-colors disabled:opacity-40"
-              data-tooltip="Change playback speed for this word range — lower is slower, higher is faster"
+              title="Change playback speed for this word range — lower is slower, higher is faster"
             >
               <Gauge className="w-3 h-3" />
               Speed {speedModeValue.toFixed(2)}x
@@ -597,7 +597,7 @@ export default function TranscriptEditor({
               onClick={handleReTranscribe}
               disabled={isReTranscribing || !canEdit}
               className="flex items-center gap-1 px-2 py-1 text-xs bg-purple-500/20 text-purple-300 rounded hover:bg-purple-500/30 disabled:opacity-40 transition-colors"
-              data-tooltip="Re-run Whisper transcription on this segment"
+              title="Re-run Whisper transcription on this segment"
             >
               <RefreshCw className={`w-3 h-3 ${isReTranscribing ? 'animate-spin' : ''}`} />
               {isReTranscribing ? 'Re-transcribing...' : 'Re-transcribe'}

frontend/src/components/WaveformTimeline.tsx

@@ -1259,7 +1259,7 @@ export default function WaveformTimeline({
           {markOutTime !== null && <span className="text-[10px] text-yellow-300">O {markOutTime.toFixed(2)}s</span>}
         </div>
         <div className="flex items-center gap-2">
-            <label className="flex items-center gap-1 text-[10px] text-editor-text-muted select-none" data-tooltip="Compress cut regions to preview the output timeline without gaps">
+            <label className="flex items-center gap-1 text-[10px] text-editor-text-muted select-none" title="Compress cut regions to preview the output timeline without gaps">
             <input
               type="checkbox"
               checked={showAdjustedTimeline}
@@ -1273,28 +1273,28 @@ export default function WaveformTimeline({
             <button
               onClick={() => setShowCutZones((v) => !v)}
               className={`px-1.5 py-0.5 rounded text-[10px] border ${showCutZones ? 'border-red-500/60 text-red-300 bg-red-500/10' : 'border-editor-border text-editor-text-muted'}`}
-              data-tooltip="Toggle cut zones on the timeline — red overlays show removed segments"
+              title="Toggle cut zones on the timeline — red overlays show removed segments"
             >
               Cut
             </button>
             <button
               onClick={() => setShowMuteZones((v) => !v)}
               className={`px-1.5 py-0.5 rounded text-[10px] border ${showMuteZones ? 'border-blue-500/60 text-blue-300 bg-blue-500/10' : 'border-editor-border text-editor-text-muted'}`}
-              data-tooltip="Toggle mute zones on the timeline — blue overlays show silenced segments"
+              title="Toggle mute zones on the timeline — blue overlays show silenced segments"
             >
               Mute
             </button>
             <button
               onClick={() => setShowGainZones((v) => !v)}
               className={`px-1.5 py-0.5 rounded text-[10px] border ${showGainZones ? 'border-amber-500/60 text-amber-300 bg-amber-500/10' : 'border-editor-border text-editor-text-muted'}`}
-              data-tooltip="Toggle gain zones on the timeline — amber overlays show volume adjustments"
+              title="Toggle gain zones on the timeline — amber overlays show volume adjustments"
             >
               Gain
             </button>
             <button
               onClick={() => setShowSpeedZones((v) => !v)}
               className={`px-1.5 py-0.5 rounded text-[10px] border ${showSpeedZones ? 'border-emerald-500/60 text-emerald-300 bg-emerald-500/10' : 'border-editor-border text-editor-text-muted'}`}
-              data-tooltip="Toggle speed zones on the timeline — emerald overlays show speed changes"
+              title="Toggle speed zones on the timeline — emerald overlays show speed changes"
             >
               Speed
             </button>
@@ -1309,7 +1309,7 @@ export default function WaveformTimeline({
           <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 shrink-0" />
           <pre
             className="select-text cursor-text whitespace-pre-wrap break-all leading-relaxed"
-            data-tooltip="Highlight this text to copy"
+            title="Highlight this text to copy"
           >
             {audioError}
           </pre>

frontend/src/components/ZoneEditor.tsx

@@ -176,7 +176,7 @@ export default function ZoneEditor() {
                   value={zonePreviewPaddingSeconds}
                   onChange={(e) => setZonePreviewPaddingSeconds(Number(e.target.value) || 0)}
                   className="w-16 px-2 py-1 bg-editor-bg border border-editor-border rounded text-xs text-editor-text focus:outline-none focus:border-editor-accent"
-                  data-tooltip="Preview time before and after each zone"
+                  title="Preview time before and after each zone"
                 />
                 <span className="text-xs text-editor-text-muted">sec</span>
               </div>
@@ -193,7 +193,7 @@ export default function ZoneEditor() {
                 ? 'bg-editor-accent text-white'
                 : 'text-editor-text-muted hover:text-editor-text'
             }`}
-            data-tooltip="Show all zones"
+            title="Show all zones"
           >
             All
           </button>
@@ -204,7 +204,7 @@ export default function ZoneEditor() {
                 ? 'bg-red-500/30 text-red-500'
                 : 'text-editor-text-muted hover:text-editor-text'
             }`}
-            data-tooltip="Show only Cut zones"
+            title="Show only Cut zones"
           >
             Cut
           </button>
@@ -215,7 +215,7 @@ export default function ZoneEditor() {
                 ? 'bg-orange-500/30 text-orange-500'
                 : 'text-editor-text-muted hover:text-editor-text'
             }`}
-            data-tooltip="Show only Mute zones"
+            title="Show only Mute zones"
           >
             Mute
           </button>
@@ -226,7 +226,7 @@ export default function ZoneEditor() {
                 ? 'bg-amber-500/30 text-amber-500'
                 : 'text-editor-text-muted hover:text-editor-text'
             }`}
-            data-tooltip="Show only Gain zones"
+            title="Show only Gain zones"
           >
             Gain
           </button>
@@ -237,7 +237,7 @@ export default function ZoneEditor() {
                 ? 'bg-emerald-500/30 text-emerald-500'
                 : 'text-editor-text-muted hover:text-editor-text'
             }`}
-            data-tooltip="Show only Speed zones"
+            title="Show only Speed zones"
           >
             Speed
           </button>
@@ -279,7 +279,7 @@ export default function ZoneEditor() {
                         removeZone('cut', range.id);
                       }}
                       className="p-1 rounded hover:bg-red-500/20 text-red-500/70 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
-                      data-tooltip="Delete cut zone"
+                      title="Delete cut zone"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
                     </button>
@@ -316,7 +316,7 @@ export default function ZoneEditor() {
                         removeZone('mute', range.id);
                       }}
                       className="p-1 rounded hover:bg-orange-500/20 text-orange-500/70 hover:text-orange-500 opacity-0 group-hover:opacity-100 transition-opacity"
-                      data-tooltip="Delete mute zone"
+                      title="Delete mute zone"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
                     </button>
@@ -355,7 +355,7 @@ export default function ZoneEditor() {
                     value={globalGainDb}
                     onChange={(e) => setGlobalGainDb(Math.max(-24, Math.min(24, Number(e.target.value) || 0)))}
                     className="w-14 px-1.5 py-0.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-                    data-tooltip="Volume adjustment in decibels — +6 dB doubles volume, -6 dB halves it"
+                    title="Volume adjustment in decibels — +6 dB doubles volume, -6 dB halves it"
                   />
                   <span className="text-xs text-amber-500/80 font-medium w-6 text-right">dB</span>
                 </div>
@@ -385,7 +385,7 @@ export default function ZoneEditor() {
                       onClick={(e) => e.stopPropagation()}
                       onChange={(e) => updateGainRange(range.id, Number(e.target.value) || 0)}
                       className="w-16 px-1.5 py-0.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-                      data-tooltip="Volume adjustment in decibels — +6 dB doubles volume, -6 dB halves it"
+                      title="Volume adjustment in decibels — +6 dB doubles volume, -6 dB halves it"
                     />
                     {renderPreviewButton(range.start, range.end, 'hover:bg-amber-500/20 text-amber-500/70 hover:text-amber-500')}
                     <button
@@ -394,7 +394,7 @@ export default function ZoneEditor() {
                         removeZone('gain', range.id);
                       }}
                       className="p-1 rounded hover:bg-amber-500/20 text-amber-500/70 hover:text-amber-500 opacity-0 group-hover:opacity-100 transition-opacity"
-                      data-tooltip="Delete gain zone"
+                      title="Delete gain zone"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
                     </button>
@@ -435,7 +435,7 @@ export default function ZoneEditor() {
                       onClick={(e) => e.stopPropagation()}
                       onChange={(e) => updateSpeedRange(range.id, Number(e.target.value) || 1)}
                       className="w-16 px-1.5 py-0.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
-                      data-tooltip="Playback speed multiplier — 1.0x is normal, 2.0x is twice as fast"
+                      title="Playback speed multiplier — 1.0x is normal, 2.0x is twice as fast"
                     />
                     {renderPreviewButton(range.start, range.end, 'hover:bg-emerald-500/20 text-emerald-500/70 hover:text-emerald-500')}
                     <button
@@ -444,7 +444,7 @@ export default function ZoneEditor() {
                         removeZone('speed', range.id);
                       }}
                       className="p-1 rounded hover:bg-emerald-500/20 text-emerald-500/70 hover:text-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity"
-                      data-tooltip="Delete speed zone"
+                      title="Delete speed zone"
                     >
                       <Trash2 className="w-3.5 h-3.5" />
                     </button>

frontend/src/index.css

@@ -47,45 +47,6 @@ video::-webkit-media-controls {
   display: none !important;
 }
 
-[data-tooltip] {
-  position: relative;
-}
 
-[data-tooltip]::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: #1f2133;
-  color: #e2e8f0;
-  font-size: 11px;
-  line-height: 1.3;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s ease;
-  z-index: 100;
-  border: 1px solid #2a2d3a;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  font-family: 'Inter', system-ui, sans-serif;
-}
 
-[data-tooltip]:hover::after {
-  opacity: 1;
-}
 
-/* Tooltip on the left side for elements near the right edge */
-[data-tooltip-side="left"]::after {
-  left: auto;
-  right: 0;
-  transform: none;
-}
-
-/* Tooltip on the right side for elements near the left edge */
-[data-tooltip-side="right"]::after {
-  left: 0;
-  transform: none;
-}