From 88406f23c7102aca752ffc0203c7ebcde943579e Mon Sep 17 00:00:00 2001
From: dabidabi <91039645+dabidabi@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:10:10 +0800
Subject: [PATCH] fix(react): avoid clipped stability tooltips

Use the browser-native title tooltip for stability badges so the
tooltip is not clipped by the scrolling table of contents.

Fixes nodejs/doc-kit#938

Signed-off-by: dabidabi <91039645+dabidabi@users.noreply.github.com>
Assisted-by: OpenAI Codex
---
 .changeset/fix-metabar-stability-tooltip.md             | 6 ++++++
 packages/react/src/html/__tests__/generate.test.mjs     | 7 ++++++-
 packages/react/src/html/ui/components/MetaBar/index.jsx | 2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-metabar-stability-tooltip.md

diff --git a/.changeset/fix-metabar-stability-tooltip.md b/.changeset/fix-metabar-stability-tooltip.md
new file mode 100644
index 000000000..1f0d3c68a
--- /dev/null
+++ b/.changeset/fix-metabar-stability-tooltip.md
@@ -0,0 +1,6 @@
+---
+'@doc-kit/generator-react': patch
+---
+
+Prevent stability badge tooltips in the meta bar from being clipped by the
+scrolling table of contents.
diff --git a/packages/react/src/html/__tests__/generate.test.mjs b/packages/react/src/html/__tests__/generate.test.mjs
index 1f2856fa4..61d5dd551 100644
--- a/packages/react/src/html/__tests__/generate.test.mjs
+++ b/packages/react/src/html/__tests__/generate.test.mjs
@@ -70,9 +70,12 @@ describe('web generate', () => {
     const { output } = await createTestConfiguration(context);
     const fs = createEntry('fs', 'File system');
     fs.path = '/api/fs';
+    const experimental = createEntry('experimental', 'Experimental API');
+    experimental.heading.depth = 2;
+    experimental.stability = { data: { index: '1' } };
     const notFoundPage = buildNotFoundPage();
     const contents = await Promise.all([
-      buildContent([fs], fs),
+      buildContent([fs, experimental], fs),
       buildContent(notFoundPage.entries, notFoundPage.head),
     ]);
 
@@ -86,6 +89,8 @@ describe('web generate', () => {
     assert.match(fsHTML, /View As/);
     assert.match(fsHTML, /href=fs\.json/);
     assert.match(fsHTML, /href=fs\.md/);
+    assert.match(fsHTML, /title=Experimental/);
+    assert.doesNotMatch(fsHTML, /data-tooltip=Experimental/);
     assert.doesNotMatch(notFoundHTML, /View As/);
     assert.match(fsHTML, /src=\.\.\/assets\//);
     assert.match(notFoundHTML, /src=\.\/assets\//);
diff --git a/packages/react/src/html/ui/components/MetaBar/index.jsx b/packages/react/src/html/ui/components/MetaBar/index.jsx
index 5f705efd3..80e3dbb0f 100644
--- a/packages/react/src/html/ui/components/MetaBar/index.jsx
+++ b/packages/react/src/html/ui/components/MetaBar/index.jsx
@@ -37,7 +37,7 @@ const HeadingValue = ({ value, stability }) => {
         size="small"
         className={styles.badge}
         kind={STABILITY_KINDS[stability]}
-        data-tooltip={STABILITY_TOOLTIPS[stability]}
+        title={STABILITY_TOOLTIPS[stability]}
         aria-label={ariaLabel}
         tabIndex={0}
       >