fix: show info-tooltips on mobile

[alexdln]

Since we only used the title, it didn't work on mobile devices if the element wasn't clickable. I used Tooltip instead of title in icon-only notes.

I also added an invisible padding in these places to increase the tap size to 32x32 (a good practice for a11y)

I also added the ability to specify a container in TooltipBase, since dialogs have their own layer (:top-layer) and elements in the body will always be below it

Closes #511

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 9, 2026 11:07am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 11:07am
npmx-lunaria	Ignored		Feb 9, 2026 11:07am

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/SkillsModal.vue	0.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors tooltip implementation across three package-related components (Dependencies.vue, InstallScripts.vue, and SkillsModal.vue) by replacing inline span wrappers with TooltipApp components. Concurrently, the Tooltip base components are enhanced with a new to prop that enables customising the Teleport target, defaulting to the body element. A new test file validates the default and custom teleport behaviour of the TooltipBase component.

Possibly related PRs

• fix(ui): add missing AppTooltip usages #883: Modifies multiple components by replacing span wrappers with TooltipApp, mirroring the same refactoring pattern applied here.
• feat(ui): add e18e module replacement recommendations to /compare page #801: Updates the Tooltip component props and behaviour, adding new functionality that complements the to teleport prop changes.

Suggested reviewers

• danielroe
• knowler

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is clearly related to the changeset, explaining the rationale for replacing title attributes with tooltips for mobile support and adding padding for accessibility.
Linked Issues check	✅ Passed	The pull request successfully addresses issue #511 by replacing title attributes with Tooltip components in Dependencies.vue, InstallScripts.vue, and SkillsModal.vue, enabling mobile touch activation for info tooltips.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of fixing mobile tooltip activation. The addition of the 'to' prop in TooltipBase and related components is a necessary infrastructure change to support dialogs with separate layer contexts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

test/nuxt/components/Tooltip.spec.ts (2)

18-23: Consider adding component cleanup and using a more robust container check.

The parent chain traversal (tooltip?.parentElement?.parentElement) is fragile and depends on the internal DOM structure (e.g., the Transition wrapper). If the component's internal structure changes, these tests will break.

Additionally, the mounted component isn't explicitly unmounted after the test, which could cause test pollution.

♻️ Suggested improvement

-  it('teleports to body by default', async () => {
-    await mountSuspended(TooltipBase, {
+  it('teleports to body by default', async () => {
+    const wrapper = await mountSuspended(TooltipBase, {
       props: {
         text: 'Tooltip text',
         isVisible: true,
         tooltipAttr: { 'aria-label': 'tooltip' },
       },
       slots: {
         default: '<button>Trigger</button>',
       },
     })
 
     const tooltip = document.querySelector<HTMLElement>('[aria-label="tooltip"]')
     expect(tooltip).not.toBeNull()
     expect(tooltip?.textContent).toContain('Tooltip text')
-
-    const currentContainer = tooltip?.parentElement?.parentElement
-    expect(currentContainer).toBe(document.body)
+    expect(document.body.contains(tooltip)).toBe(true)
+
+    wrapper.unmount()
   })

---

31-52: Add component cleanup to prevent test pollution.

The second test properly cleans up the container element but doesn't unmount the component. Consider unmounting the wrapper to ensure proper test isolation.

♻️ Suggested improvement

   it('teleports into provided container when using selector string', async () => {
     const container = document.createElement('div')
     container.id = 'tooltip-container'
     document.body.appendChild(container)
 
+    let wrapper
     try {
-      await mountSuspended(TooltipBase, {
+      wrapper = await mountSuspended(TooltipBase, {
         props: {
           text: 'Tooltip text',
           isVisible: true,
           to: '#tooltip-container',
           tooltipAttr: { 'aria-label': 'tooltip' },
         },
         slots: {
           default: '<button>Trigger</button>',
         },
       })
 
       const tooltip = container.querySelector<HTMLElement>('[aria-label="tooltip"]')
       expect(tooltip).not.toBeNull()
       expect(tooltip?.textContent).toContain('Tooltip text')
-
-      const currentContainer = tooltip?.parentElement?.parentElement
-      expect(currentContainer).toBe(container)
+      expect(container.contains(tooltip)).toBe(true)
     } finally {
+      wrapper?.unmount()
       container.remove()
     }
   })

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}