Skip to content

[@mantine/core] Button: Native tooltip for button#9024

Open
WojakGra wants to merge 3 commits into
mantinedev:masterfrom
WojakGra:native-tooltip-for-button
Open

[@mantine/core] Button: Native tooltip for button#9024
WojakGra wants to merge 3 commits into
mantinedev:masterfrom
WojakGra:native-tooltip-for-button

Conversation

@WojakGra

Copy link
Copy Markdown
Contributor

This pull request introduces a new demo showcasing how to implement a native CSS tooltip for a button using modern CSS Anchor Positioning features. The new example is integrated into the documentation, complete with both TypeScript and CSS code, and is now available in the Button component demos. This provides users with an alternative to JavaScript-based tooltips, while also explaining browser support caveats.

New Native CSS Tooltip Demo:

  • Added a new demo component, Button.demo.nativeTooltip.tsx, which demonstrates a tooltip positioned with CSS Anchor Positioning and includes both the React and CSS code needed for the example.
  • Created a corresponding CSS module, Button.demo.nativeTooltipStyles.module.css, defining the tooltip's positioning, appearance, and show/hide behavior on hover using anchor positioning properties.

Documentation and Integration:

  • Updated the Button documentation (button.mdx) to include a new section explaining the native CSS tooltip approach, its limitations, and when to use the built-in Tooltip component instead.
  • Registered the new demo in the Button demos story file, making it available in the demo explorer.
  • Exported the new demo from the Button demos index for use in documentation and stories.

@WojakGra WojakGra changed the title Native tooltip for button [@mantine/core] Button: Native tooltip for button Jun 29, 2026
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.

1 participant