fix: use tooltip in important info-notes instead of title

Author: alexdln

app/components/Package/Dependencies.vue

@@ -95,15 +95,15 @@ const numberFormatter = useNumberFormatter()
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
-            <span
+            <TooltipApp
               v-if="outdatedDeps[dep]"
-              class="shrink-0"
+              class="shrink-0 p-2 -m-2"
               :class="getVersionClass(outdatedDeps[dep])"
-              :title="getOutdatedTooltip(outdatedDeps[dep], $t)"
               aria-hidden="true"
+              :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
-            </span>
+            </TooltipApp>
             <LinkBase
               v-if="getVulnerableDepInfo(dep)"
               :to="packageRoute(dep, getVulnerableDepInfo(dep)!.version)"

app/components/Package/InstallScripts.vue

@@ -115,18 +115,18 @@ const isExpanded = shallowRef(false)
             {{ dep }}
           </LinkBase>
           <span class="flex items-center gap-1">
-            <span
+            <TooltipApp
               v-if="
                 outdatedNpxDeps[dep] &&
                 outdatedNpxDeps[dep].resolved !== outdatedNpxDeps[dep].latest
               "
-              class="shrink-0"
+              class="shrink-0 p-2 -m-2"
               :class="getVersionClass(outdatedNpxDeps[dep])"
-              :title="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
               aria-hidden="true"
+              :text="getOutdatedTooltip(outdatedNpxDeps[dep], $t)"
             >
               <span class="i-carbon:warning-alt w-3 h-3" />
-            </span>
+            </TooltipApp>
             <span
               class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedNpxDeps[dep])"

app/components/Package/SkillsModal.vue

@@ -164,11 +164,15 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             aria-hidden="true"
           />
           <span class="font-mono text-sm text-fg-muted">{{ skill.name }}</span>
-          <span
+          <TooltipApp
             v-if="skill.warnings?.length"
-            class="i-carbon:warning w-3.5 h-3.5 text-amber-500 shrink-0"
-            :title="getWarningTooltip(skill)"
-          />
+            class="shrink-0 p-2 -m-2"
+            aria-hidden="true"
+            :text="getWarningTooltip(skill)"
+            to="#skills-modal"
+          >
+            <span class="i-carbon:warning w-3.5 h-3.5 text-amber-500" />
+          </TooltipApp>
         </button>
 
         <!-- Expandable details -->