fix(ui): tooltip z index and positioning

Author: vinnymac

app/components/Package/VersionDistribution.vue

@@ -247,7 +247,8 @@ const xAxisLabels = computed(() => {
         v-model="hideSmallVersions"
         :label="$t('package.versions.hide_old_versions')"
         :tooltip="$t('package.versions.hide_old_versions_tooltip')"
-        tooltip-position="top"
+        tooltip-position="right"
+        :tooltip-teleport-to="inModal ? '#chart-modal' : undefined"
         :class="{ 'opacity-50 pointer-events-none': pending }"
       />
     </div>

app/components/Settings/Toggle.client.vue

@@ -6,6 +6,7 @@ defineProps<{
   description?: string
   tooltip?: string
   tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
+  tooltipTeleportTo?: string
   class?: string | Record<string, boolean> | Array<string | Record<string, boolean>>
 }>()
 
@@ -23,7 +24,12 @@ const checked = defineModel<boolean>({
     @click="checked = !checked"
     :class="class"
   >
-    <TooltipApp v-if="tooltip && label" :text="tooltip" :position="tooltipPosition ?? 'top'">
+    <TooltipApp
+      v-if="tooltip && label"
+      :text="tooltip"
+      :position="tooltipPosition ?? 'top'"
+      :teleportTo="tooltipTeleportTo"
+    >
       <span class="text-sm font-mono text-fg group-hover:text-fg/80 transition-colors select-none">
         {{ label }}
       </span>

app/components/Tooltip/App.vue

@@ -6,6 +6,8 @@ const props = defineProps<{
   position?: 'top' | 'bottom' | 'left' | 'right'
   /** Enable interactive tooltip (pointer events + hide delay for clickable content) */
   interactive?: boolean
+  /** Teleport target selector (defaults to 'body') */
+  teleportTo?: string
 }>()
 
 const isVisible = shallowRef(false)
@@ -47,6 +49,7 @@ const tooltipAttrs = computed(() => {
     :isVisible
     :position
     :interactive
+    :teleportTo
     :tooltip-attr="tooltipAttrs"
     @mouseenter="show"
     @mouseleave="hide"

app/components/Tooltip/Base.vue

@@ -14,6 +14,8 @@ const props = defineProps<{
   interactive?: boolean
   /** attributes for tooltip element */
   tooltipAttr?: HTMLAttributes
+  /** Teleport target selector (defaults to 'body') */
+  teleportTo?: string
 }>()
 
 const triggerRef = useTemplateRef('triggerRef')
@@ -32,7 +34,7 @@ const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
   <div ref="triggerRef" class="inline-flex">
     <slot />
 
-    <Teleport to="body">
+    <Teleport :to="teleportTo ?? 'body'">
       <Transition
         enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
         leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"