From 27fee3ac3434272b0530d031af7d1d4c79f43e39 Mon Sep 17 00:00:00 2001
From: Grzegorz Kucmierz <gkucmierz@gmail.com>
Date: Wed, 4 Mar 2026 04:30:38 +0000
Subject: [PATCH] feat: replace native titles with global vue tooltips

---
 src/App.vue                                   |   2 +
 src/components/Header.vue                     |   4 +-
 src/components/common/GlobalTooltip.vue       | 138 ++++++++++++++++++
 src/components/tools/ClipboardSniffer.vue     |   2 +-
 src/components/tools/QrCode.vue               |  10 +-
 src/components/tools/QrScanner.vue            |  14 +-
 src/components/tools/UrlCleaner.vue           |  20 +--
 .../tools/UrlCleanerExceptionsModal.vue       |  14 +-
 .../tools/common/ExtensionStatus.vue          |   2 +-
 src/composables/useTooltip.js                 |  34 +++++
 src/directives/tooltip.js                     |  28 ++++
 src/main.js                                   |   2 +
 12 files changed, 237 insertions(+), 33 deletions(-)
 create mode 100644 src/components/common/GlobalTooltip.vue
 create mode 100644 src/composables/useTooltip.js
 create mode 100644 src/directives/tooltip.js

diff --git a/src/App.vue b/src/App.vue
index a5df5d0..57b542e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 import ReloadPrompt from './components/ReloadPrompt.vue'
+import GlobalTooltip from './components/common/GlobalTooltip.vue'
 import { UI_CONFIG } from './config/ui'
 
 const isSidebarOpen = ref(window.innerWidth >= 768)
@@ -61,6 +62,7 @@ onUnmounted(() => {
   <Footer />
   <InstallPrompt />
   <ReloadPrompt />
+  <GlobalTooltip />
 </template>
 
 <style scoped>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0cffabe..833a306 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -35,7 +35,7 @@ onMounted(() => {
           class="menu-btn"
           @click="$emit('toggleSidebar')"
           aria-label="Toggle Menu"
-          title="Toggle Menu"
+          v-tooltip="'Toggle Menu'"
           v-ripple
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -50,7 +50,7 @@ onMounted(() => {
       <button
         class="btn-neon nav-btn icon-only"
         @click="toggleTheme"
-        :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        v-tooltip="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
         v-ripple
       >
         <Sun v-if="isDark" :size="20" />
diff --git a/src/components/common/GlobalTooltip.vue b/src/components/common/GlobalTooltip.vue
new file mode 100644
index 0000000..3567cc5
--- /dev/null
+++ b/src/components/common/GlobalTooltip.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { tooltipState } from '../../composables/useTooltip'
+import { ref, watch, nextTick } from 'vue'
+
+const tooltipRef = ref(null)
+const x = ref(0)
+const y = ref(0)
+const arrowX = ref(0)
+const isBottom = ref(false)
+
+watch(() => tooltipState.isVisible, async (visible) => {
+  if (visible) {
+    // Wait for DOM update to ensure the text content affects height before measuring
+    await nextTick()
+    if (!tooltipRef.value || !tooltipState.targetRect) return
+
+    const rect = tooltipState.targetRect
+    const tooltipRect = tooltipRef.value.getBoundingClientRect()
+
+    let top = rect.top - tooltipRect.height - 8
+    let idealCenter = rect.left + (rect.width / 2)
+    let left = idealCenter - (tooltipRect.width / 2)
+
+    isBottom.value = false
+    if (top < 8) {
+      top = rect.bottom + 8
+      isBottom.value = true
+    }
+
+    // Bounds checking for the tooltip box
+    let actualLeft = left
+    if (actualLeft < 8) {
+      actualLeft = 8
+    } else if (actualLeft + tooltipRect.width > window.innerWidth - 8) {
+      actualLeft = window.innerWidth - tooltipRect.width - 8
+    }
+
+    // Calculate the difference between where the box is forced to be,
+    // and where it naturally wanted to be. We move the arrow by the opposite amount.
+    arrowX.value = idealCenter - (actualLeft + (tooltipRect.width / 2))
+
+    x.value = actualLeft
+    y.value = top
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="tooltipRef"
+    class="global-tooltip"
+    :class="{ 'visible': tooltipState.isVisible, 'tooltip-bottom': isBottom }"
+    :style="{
+      transform: `translate(${x}px, ${y}px)`,
+      '--arrow-offset': `${arrowX}px`
+    }"
+  >
+    {{ tooltipState.text }}
+  </div>
+</template>
+
+<style scoped>
+.global-tooltip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: #f8fafc;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateY(4px) scale(0.95);
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.global-tooltip::after {
+  content: '';
+  position: absolute;
+  left: calc(50% + var(--arrow-offset, 0px));
+  bottom: -5px;
+  margin-left: -5px;
+  width: 10px;
+  height: 10px;
+  background: rgba(15, 23, 42, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  transform: rotate(45deg);
+  border-radius: 0 0 2px 0;
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+.global-tooltip.tooltip-bottom::after {
+  bottom: auto;
+  top: -5px;
+  border-right: none;
+  border-bottom: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2px 0 0 0;
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+.global-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+  /* Transform returns to natural pos defined by inline styles when visible */
+}
+
+:root[data-theme="light"] .global-tooltip {
+  background: rgba(255, 255, 255, 0.95);
+  color: #0f172a;
+  border-color: rgba(15, 23, 42, 0.1);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip::after {
+  background: rgba(255, 255, 255, 0.95);
+  border-right-color: rgba(15, 23, 42, 0.1);
+  border-bottom-color: rgba(15, 23, 42, 0.1);
+}
+
+:root[data-theme="light"] .global-tooltip.tooltip-bottom::after {
+  border-left-color: rgba(15, 23, 42, 0.1);
+  border-top-color: rgba(15, 23, 42, 0.1);
+}
+</style>
diff --git a/src/components/tools/ClipboardSniffer.vue b/src/components/tools/ClipboardSniffer.vue
index a7e066a..576e7c0 100644
--- a/src/components/tools/ClipboardSniffer.vue
+++ b/src/components/tools/ClipboardSniffer.vue
@@ -62,7 +62,7 @@ const clearText = () => {
           class="btn-neon"
           @click="startListening"
           :disabled="!isExtensionReady"
-          :title="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
+          v-tooltip="!isExtensionReady ? 'Extension required' : 'Start capturing clipboard'"
           v-ripple
         >
           Start Sniffing
diff --git a/src/components/tools/QrCode.vue b/src/components/tools/QrCode.vue
index a95bbbd..42e7a5b 100644
--- a/src/components/tools/QrCode.vue
+++ b/src/components/tools/QrCode.vue
@@ -359,7 +359,7 @@ const triggerDownload = (blob, filename) => {
               class="icon-btn edit-toggle-btn"
               :class="{ 'active': showHandles }"
               @click="showHandles = !showHandles"
-              title="Toggle edit handles"
+              v-tooltip="'Toggle edit handles'"
             >
               <Eye v-if="showHandles" size="20" />
               <EyeOff v-else size="20" />
@@ -370,11 +370,11 @@ const triggerDownload = (blob, filename) => {
           <div class="control-group">
             <label>Size (px)</label>
             <div class="number-control size-control">
-              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100" v-ripple>-100</button>
-              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10" v-ripple>-10</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" v-tooltip="'-100'" v-ripple>-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" v-tooltip="'-10'" v-ripple>-10</button>
               <input type="number" v-model.number="size" class="number-input" />
-              <button class="control-btn" @click="size += 10" title="+10" v-ripple>+10</button>
-              <button class="control-btn" @click="size += 100" title="+100" v-ripple>+100</button>
+              <button class="control-btn" @click="size += 10" v-tooltip="'+10'" v-ripple>+10</button>
+              <button class="control-btn" @click="size += 100" v-tooltip="'+100'" v-ripple>+100</button>
             </div>
           </div>
 
diff --git a/src/components/tools/QrScanner.vue b/src/components/tools/QrScanner.vue
index c5329ef..8f171c8 100644
--- a/src/components/tools/QrScanner.vue
+++ b/src/components/tools/QrScanner.vue
@@ -322,7 +322,7 @@ const isUrl = (string) => {
               v-if="hasMultipleCameras"
               class="switch-camera-btn"
               @click.stop="switchCamera"
-              title="Switch Camera"
+              v-tooltip="'Switch Camera'"
               v-ripple
             >
               <SwitchCamera size="24" />
@@ -333,13 +333,13 @@ const isUrl = (string) => {
             <div class="results-header">
               <h3>Scanned Codes ({{ scannedCodes.length }})</h3>
               <div v-if="scannedCodes.length > 0" class="header-actions">
-                <button class="icon-btn" @click="copyAll" title="Copy All" v-ripple>
+                <button class="icon-btn" @click="copyAll" v-tooltip="'Copy All'" v-ripple>
                   <Copy size="18" />
                 </button>
-                <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+                <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
                   <Download size="18" />
                 </button>
-                <button class="icon-btn delete-btn" @click="clearHistory" title="Clear All" v-ripple>
+                <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear All'" v-ripple>
                   <Trash2 size="18" />
                 </button>
               </div>
@@ -358,13 +358,13 @@ const isUrl = (string) => {
                   </div>
                 </div>
                 <div class="item-actions">
-                  <button class="icon-btn" @click="copyToClipboard(code.value)" title="Copy" v-ripple>
+                  <button class="icon-btn" @click="copyToClipboard(code.value)" v-tooltip="'Copy'" v-ripple>
                     <Copy size="18" />
                   </button>
-                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" title="Generate QR Code" v-ripple>
+                  <button class="icon-btn" @click="navigateToGenerateQr(code.value)" v-tooltip="'Generate QR Code'" v-ripple>
                     <QrCode size="18" />
                   </button>
-                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" title="Remove" v-ripple>
+                  <button class="icon-btn delete-btn" @click="removeCode(code.id)" v-tooltip="'Remove'" v-ripple>
                     <Trash2 size="18" />
                   </button>
                 </div>
diff --git a/src/components/tools/UrlCleaner.vue b/src/components/tools/UrlCleaner.vue
index d9a7708..26c3b84 100644
--- a/src/components/tools/UrlCleaner.vue
+++ b/src/components/tools/UrlCleaner.vue
@@ -110,7 +110,7 @@ onUnmounted(() => {
       <div class="panel-header">
         <h2 class="tool-title">URL Cleaner</h2>
         <div class="header-actions">
-          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" title="Cleaning Exceptions" v-ripple>
+          <button class="icon-btn settings-btn" @click="showExceptionsModal = true" v-tooltip="'Cleaning Exceptions'" v-ripple>
             <Settings size="20" />
           </button>
           <ExtensionStatus :isReady="isExtensionReady" />
@@ -137,7 +137,7 @@ onUnmounted(() => {
             :class="{ 'active': isWatchEnabled && isExtensionReady }"
             @click="toggleWatch"
             :disabled="!isExtensionReady"
-            :title="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
+            v-tooltip="!isExtensionReady ? 'Extension required for auto-watch' : 'Automatically clean URLs from clipboard'"
             v-ripple
           >
             <Power size="18" />
@@ -151,13 +151,13 @@ onUnmounted(() => {
         <div class="history-header">
           <h3>Cleaned URLs ({{ cleanedHistory.length }})</h3>
           <div class="history-actions">
-            <button class="icon-btn" @click="copyAllUrls" title="Copy all URLs" v-ripple>
+            <button class="icon-btn" @click="copyAllUrls" v-tooltip="'Copy all URLs'" v-ripple>
               <Copy size="18" />
             </button>
-            <button class="icon-btn" @click="downloadJson" title="Download JSON" v-ripple>
+            <button class="icon-btn" @click="downloadJson" v-tooltip="'Download JSON'" v-ripple>
               <Download size="18" />
             </button>
-            <button class="icon-btn delete-btn" @click="clearHistory" title="Clear History" v-ripple>
+            <button class="icon-btn delete-btn" @click="clearHistory" v-tooltip="'Clear History'" v-ripple>
               <Trash2 size="18" />
             </button>
           </div>
@@ -176,13 +176,13 @@ onUnmounted(() => {
               </div>
             </div>
             <div class="item-actions">
-              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" title="Copy" v-ripple>
-                <Copy size="18" />
+              <button class="icon-btn" @click="copyToClipboard(item.cleaned)" v-tooltip="'Copy'" v-ripple>
+                <Copy size="16" />
               </button>
-              <a :href="item.cleaned" target="_blank" class="icon-btn" title="Open">
-                <ExternalLink size="18" />
+              <a :href="item.cleaned" target="_blank" class="icon-btn" v-tooltip="'Open'" v-ripple>
+                <ExternalLink size="16" />
               </a>
-              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" title="Remove" v-ripple>
+              <button class="icon-btn delete-btn" @click="removeEntry(item.id)" v-tooltip="'Remove'" v-ripple>
                 <X size="18" />
               </button>
             </div>
diff --git a/src/components/tools/UrlCleanerExceptionsModal.vue b/src/components/tools/UrlCleanerExceptionsModal.vue
index 93384e0..7e9e244 100644
--- a/src/components/tools/UrlCleanerExceptionsModal.vue
+++ b/src/components/tools/UrlCleanerExceptionsModal.vue
@@ -268,13 +268,13 @@ const resetToDefault = (ruleId) => {
 
             <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
               <div class="rule-info">
-                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" v-tooltip="'Click to edit'">{{ rule.domainPattern }}</div>
                 <div class="rule-details">
                   <div class="params-list">
                     <template v-if="rule.keepAllParams">
                       <span class="detail-tag">
                         Keep all params
-                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" title="Disable keep all params">
+                        <button class="remove-param-btn" @click.stop="toggleKeepAllParams(rule.id)" v-tooltip="'Disable keep all params'">
                           <X size="12" />
                         </button>
                       </span>
@@ -282,14 +282,14 @@ const resetToDefault = (ruleId) => {
                     <template v-else>
                       <span v-for="param in rule.keepParams" :key="param" class="detail-tag">
                         {{ param }}
-                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" title="Remove parameter">
+                        <button class="remove-param-btn" @click.stop="removeParam(rule.id, param)" v-tooltip="'Remove parameter'">
                           <X size="12" />
                         </button>
                       </span>
                     </template>
                     <span v-if="rule.keepHash" class="detail-tag hash-tag">
                       Keep #
-                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" title="Remove hash exception">
+                      <button class="remove-param-btn" @click.stop="toggleKeepHash(rule.id)" v-tooltip="'Remove hash exception'">
                         <X size="12" />
                       </button>
                     </span>
@@ -302,7 +302,7 @@ const resetToDefault = (ruleId) => {
                 <button
                   class="icon-btn"
                   @click="toggleRule(rule.id)"
-                  :title="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
+                  v-tooltip="rule.isEnabled ? 'Disable rule' : 'Enable rule'"
                   v-ripple
                 >
                   <div class="toggle-switch" :class="{ active: rule.isEnabled }"></div>
@@ -312,12 +312,12 @@ const resetToDefault = (ruleId) => {
                   v-if="!rule.isDefault"
                   class="icon-btn delete-btn"
                   @click="removeRule(rule.id)"
-                  title="Remove rule"
+                  v-tooltip="'Remove rule'"
                   v-ripple
                 >
                   <Trash2 size="18" />
                 </button>
-                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" title="Restore default rule" v-ripple>
+                <button v-else class="btn-neon small default-reset" @click="resetToDefault(rule.id)" v-tooltip="'Restore default rule'" v-ripple>
                   <RotateCcw size="16" /> Default
                 </button>
               </div>
diff --git a/src/components/tools/common/ExtensionStatus.vue b/src/components/tools/common/ExtensionStatus.vue
index 6054d37..3feaa08 100644
--- a/src/components/tools/common/ExtensionStatus.vue
+++ b/src/components/tools/common/ExtensionStatus.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" :title="isReady ? 'Extension Connected' : 'Extension Not Connected'">
+  <div class="extension-status" v-bind="$attrs" :class="{ 'is-ready': isReady }" @click="showModal = true" v-tooltip="isReady ? 'Extension Connected' : 'Extension Not Connected'">
     <Plug v-if="isReady" size="18" />
     <Plus v-else size="18" />
   </div>
diff --git a/src/composables/useTooltip.js b/src/composables/useTooltip.js
new file mode 100644
index 0000000..bf379cf
--- /dev/null
+++ b/src/composables/useTooltip.js
@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+
+export const tooltipState = reactive({
+  isVisible: false,
+  text: '',
+  targetRect: null
+})
+
+export function showTooltip(el, text) {
+  if (!text) return;
+
+  if (!el.hasAttribute('aria-label')) {
+    el.setAttribute('aria-label', text);
+  }
+
+  const rect = el.getBoundingClientRect();
+  tooltipState.targetRect = {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    bottom: rect.bottom
+  };
+  tooltipState.text = text;
+  tooltipState.isVisible = true;
+}
+
+// Hide tooltip on any scroll event to avoid floating detached tooltips
+if (typeof window !== 'undefined') {
+  window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
+}
+
+export function hideTooltip() {
+  tooltipState.isVisible = false;
+}
diff --git a/src/directives/tooltip.js b/src/directives/tooltip.js
new file mode 100644
index 0000000..1afbc03
--- /dev/null
+++ b/src/directives/tooltip.js
@@ -0,0 +1,28 @@
+import { showTooltip, hideTooltip, tooltipState } from '../composables/useTooltip'
+
+export const tooltipDirective = {
+  mounted(el, binding) {
+    el._tooltipText = binding.value;
+
+    el.addEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
+    el.addEventListener('mouseleave', hideTooltip);
+    el.addEventListener('focus', () => showTooltip(el, el._tooltipText));
+    el.addEventListener('blur', hideTooltip);
+  },
+  updated(el, binding) {
+    el._tooltipText = binding.value;
+
+    if (tooltipState.isVisible && tooltipState.text !== binding.value) {
+      if (el.matches(':hover') || document.activeElement === el) {
+        showTooltip(el, binding.value);
+      }
+    }
+  },
+  unmounted(el) {
+    el.removeEventListener('mouseenter', () => showTooltip(el, el._tooltipText));
+    el.removeEventListener('mouseleave', hideTooltip);
+    el.removeEventListener('focus', () => showTooltip(el, el._tooltipText));
+    el.removeEventListener('blur', hideTooltip);
+    hideTooltip();
+  }
+};
diff --git a/src/main.js b/src/main.js
index f828c97..5b5f8d2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import Ripple from './directives/ripple'
+import { tooltipDirective } from './directives/tooltip'
 import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'
 
 // Configure BarcodeDetector polyfill to use local WASM file
@@ -28,5 +29,6 @@ try {
 const app = createApp(App)
 
 app.directive('ripple', Ripple)
+app.directive('tooltip', tooltipDirective)
 app.use(router)
 app.mount('#app')