Skip to content

[Docs] Wrap EuiButtonIcon with tooltips#9771

Open
weronikaolejniczak wants to merge 3 commits into
elastic:mainfrom
weronikaolejniczak:fix/docs
Open

[Docs] Wrap EuiButtonIcon with tooltips#9771
weronikaolejniczak wants to merge 3 commits into
elastic:mainfrom
weronikaolejniczak:fix/docs

Conversation

@weronikaolejniczak

@weronikaolejniczak weronikaolejniczak commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Summary

@JasonStoltz raised a point about our button docs contradicting our guidelines: EuiButtonIcon were not wrapped with EuiToolTip. So this simply addresses that.

Screenshots

Before After
No tooltip when hovering Screenshot 2026-06-30 at 13 55 36 Screenshot 2026-06-30 at 13 54 58

QA instructions for reviewer

Ensure that:

  • the examples render correctly
  • the examples work in Codesandbox
  • all EuiButtonIcon are wrapped with a tooltip

Site-wide (docusaurus-theme - check on any page)

  • Heading anchor link - hover any heading; the link icon shows a tooltip
  • Demo action bar on any interactive example - hover Copy to clipboard and Reload example buttons (tooltips present, disableScreenReaderOutput)
  • "Open in CodeSandbox" button on any demo - tooltip present

Specific pages

@weronikaolejniczak weronikaolejniczak self-assigned this Jun 30, 2026
@elastic-vault-github-plugin-prod

Copy link
Copy Markdown
1 visual difference(s) found - expand to review, then click Approve visual changes to update baselines

euipopover (1 difference)

StoryBeforeAfterDiff
playground desktop

@weronikaolejniczak weronikaolejniczak added the skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR) label Jun 30, 2026
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review June 30, 2026 11:56
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner June 30, 2026 11:56
Copilot AI review requested due to automatic review settings June 30, 2026 11:56

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Updates the EUI button documentation to align EuiButtonIcon examples with the repo’s tooltip guidance and the @elastic/eui/tooltip-button-icon-wrap ESLint rule, by documenting and demonstrating tooltip wrapping for icon-only buttons.

Changes:

  • Adds written guidance (and examples) recommending EuiToolTip wrapping for EuiButtonIcon instead of using the native title prop.
  • Updates multiple interactive doc examples to wrap EuiButtonIcon instances in EuiToolTip.
  • Removes title usage from toggle button icon examples in favor of EuiToolTip.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
@infra-vault-gh-plugin-prod

Copy link
Copy Markdown

💚 Build Succeeded

cc @weronikaolejniczak

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

Comment thread packages/website/docs/components/navigation/buttons/button.mdx
Comment thread packages/website/docs/components/navigation/buttons/button.mdx Outdated
@weronikaolejniczak weronikaolejniczak marked this pull request as draft July 1, 2026 10:33

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 4 comments.

Comment thread packages/website/docs/components/data-grid/schema-and-columns.mdx Outdated
Comment thread packages/website/docs/components/data-grid/cells-and-popovers.mdx Outdated
Comment thread packages/website/docs/components/navigation/buttons/button.mdx
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review July 1, 2026 15:00
@infra-vault-gh-plugin-prod

Copy link
Copy Markdown

💚 Build Succeeded

History

cc @weronikaolejniczak

@acstll acstll requested review from acstll and removed request for acstll July 3, 2026 06:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-vrt Skips Visual Regression Testing job in CI (clearly state why you're using it in your PR)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants