Skip to content

fix(react): avoid clipped stability tooltips - #1046

Draft
dabidabi wants to merge 1 commit into
nodejs:mainfrom
dabidabi:agent/fix-metabar-stability-tooltip
Draft

fix(react): avoid clipped stability tooltips#1046
dabidabi wants to merge 1 commit into
nodejs:mainfrom
dabidabi:agent/fix-metabar-stability-tooltip

Conversation

@dabidabi

Copy link
Copy Markdown

Summary

  • use the browser-native title tooltip for stability badges in the meta bar
  • keep the existing accessible label and keyboard focus behavior
  • add a generated-HTML regression test and a patch changeset

Why

The shared CSS tooltip is rendered inside the meta bar's scrolling table of
contents. When a stability badge wraps near either horizontal edge, that
container clips part of the tooltip. A native tooltip is rendered outside the
scroll container, so its text remains fully visible without adding client-side
JavaScript to the otherwise static table of contents.

Fixes #938.

Validation

  • prettier --check on the changed files
  • ESLint on the changed JavaScript files
  • targeted web generator tests: 5 passed
  • full test suite: 561 passed

AI assistance was used to investigate, implement, test, and review this change.
The commit includes an Assisted-by: OpenAI Codex attribution.

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

Fixes nodejs#938

Signed-off-by: dabidabi <91039645+dabidabi@users.noreply.github.com>
Assisted-by: OpenAI Codex
@vercel

vercel Bot commented Aug 18, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
api-docs-tooling Ready Ready Preview Aug 18, 2026 7:12am

Request Review

@AugustinMauroy AugustinMauroy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay it's worked, but it's a regression that was better before I mean the fix should be applied on the tool-tips component

@ovflowd ovflowd left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This switches to native browser tooltips whereas the ask is to ensure the current custom tooltips (generated via data-tooltip) don't have the issue. i.e.: this should be as simple as fixing the source CSS behind the tooltips. That might be on @node-core/ui-components or on doc-kit itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The tooltips for methods or attributes in the sidebar are not fully displayed.

3 participants