fix: navigation is blocked after clicking View Source

Author: rzzf

app/components/Package/SkillsModal.vue

@@ -170,6 +170,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
             aria-hidden="true"
             :text="getWarningTooltip(skill)"
             to="#skills-modal"
+            defer
           >
             <span class="i-lucide:circle-alert w-3.5 h-3.5 text-amber-500" />
           </TooltipApp>

app/components/Tooltip/App.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
   interactive?: boolean
   /** Teleport target for the tooltip content (defaults to 'body') */
   to?: string | HTMLElement
+  /** Whether to defer teleport rendering until after the component is mounted */
+  defer?: boolean
   /** Offset distance in pixels (default: 4) */
   offset?: number
 }>()
@@ -52,6 +54,7 @@ const tooltipAttrs = computed(() => {
     :position
     :interactive
     :to
+    :defer
     :offset
     :tooltip-attr="tooltipAttrs"
     @mouseenter="show"

app/components/Tooltip/Base.vue

@@ -17,6 +17,8 @@ const props = withDefaults(
     tooltipAttr?: HTMLAttributes
     /** Teleport target for the tooltip content (defaults to 'body') */
     to?: string | HTMLElement
+    /** Whether to defer teleport rendering until after the component is mounted */
+    defer?: boolean
     /** Offset distance in pixels (default: 4) */
     offset?: number
     /** Strategy for the tooltip - prefer fixed for sticky containers (defaults to 'absolute') */
@@ -46,7 +48,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
   <div ref="triggerRef" class="inline-flex">
     <slot />
 
-    <Teleport :to="props.to">
+    <Teleport :to="props.to" :defer>
       <Transition
         enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
         leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"