Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: expand tooltip vs. popover info #2209

Merged
merged 8 commits into from
Mar 19, 2025

Conversation

hellogreg
Copy link
Collaborator

@hellogreg hellogreg commented Mar 10, 2025

What I did

  1. Reworked the text for tooltips vs. popovers, paying extra attention to the technical differences (contents, close buttons, triggering and dimissal)

Testing Instructions

  1. View the updated Tooltip vs. Popover section and ensure the content is sufficient and well-written!

@hellogreg hellogreg linked an issue Mar 10, 2025 that may be closed by this pull request
Copy link

changeset-bot bot commented Mar 10, 2025

⚠️ No Changeset found

Latest commit: f0d2a3a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented Mar 10, 2025

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit f0d2a3a
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/67d82dddabaea0000871a16a
😎 Deploy Preview https://deploy-preview-2209--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Mar 10, 2025

Size Change: -1 B (0%)

Total Size: 202 kB

Filename Size Change
./elements.js 472 B -1 B (-0.21%)
ℹ️ View Unchanged
Filename Size
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-header.js 2.63 kB
./elements/rh-accordion/rh-accordion-panel.js 1.3 kB
./elements/rh-accordion/rh-accordion.js 3.07 kB
./elements/rh-alert/rh-alert.js 4.19 kB
./elements/rh-audio-player/rh-audio-player-about.js 1.75 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.77 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.5 kB
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.32 kB
./elements/rh-audio-player/rh-audio-player.js 13 kB
./elements/rh-audio-player/rh-cue.js 1.89 kB
./elements/rh-audio-player/rh-transcript.js 2.65 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-avatar/rh-avatar.js 2.79 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.04 kB
./elements/rh-badge/rh-badge.js 1.52 kB
./elements/rh-blockquote/rh-blockquote.js 1.31 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.47 kB
./elements/rh-button/rh-button.js 4.22 kB
./elements/rh-card/rh-card.js 3.53 kB
./elements/rh-code-block/prism.css.js 667 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-code-block/rh-code-block.js 7.28 kB
./elements/rh-cta/rh-cta.js 3.96 kB
./elements/rh-dialog/rh-dialog.js 4.73 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-block.js 665 B
./elements/rh-footer/rh-footer-copyright.js 310 B
./elements/rh-footer/rh-footer-links.js 1.11 kB
./elements/rh-footer/rh-footer-social-link.js 901 B
./elements/rh-footer/rh-footer-universal.js 3.96 kB
./elements/rh-footer/rh-footer.js 4.92 kB
./elements/rh-health-index/rh-health-index.js 2.31 kB
./elements/rh-icon/rh-icon.js 2.4 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.27 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.44 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.26 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.68 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 498 B
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.2 kB
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-pagination/rh-pagination.js 5.35 kB
./elements/rh-site-status/rh-site-status.js 2.46 kB
./elements/rh-skip-link/rh-skip-link.js 1.12 kB
./elements/rh-spinner/rh-spinner.js 1.35 kB
./elements/rh-stat/rh-stat.js 2.08 kB
./elements/rh-subnav/rh-subnav.js 2.7 kB
./elements/rh-surface/rh-surface.js 1.07 kB
./elements/rh-surface/test/elements.js 310 B
./elements/rh-switch/rh-switch.js 2.89 kB
./elements/rh-table/rh-sort-button.js 1.45 kB
./elements/rh-table/rh-table.js 3.44 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.02 kB
./elements/rh-tabs/rh-tab.js 2.96 kB
./elements/rh-tabs/rh-tabs.js 3.73 kB
./elements/rh-tag/rh-tag.js 2.76 kB
./elements/rh-tile/rh-tile-group.js 1.76 kB
./elements/rh-tile/rh-tile.js 4.86 kB
./elements/rh-timestamp/rh-timestamp.js 883 B
./elements/rh-tooltip/rh-tooltip.js 2.69 kB
./elements/rh-video-embed/rh-video-embed.js 4.53 kB
./lib/context/color/consumer.js 1.41 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.18 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.21 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.19 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./lib/ssr-controller.js 251 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/uxdot-best-practice.js 665 B
./uxdot/uxdot-copy-button.js 1.14 kB
./uxdot/uxdot-copy-permalink.js 1.03 kB
./uxdot/uxdot-example.js 1.12 kB
./uxdot/uxdot-feedback.js 677 B
./uxdot/uxdot-header.js 988 B
./uxdot/uxdot-installation-tabs.js 621 B
./uxdot/uxdot-masthead.js 757 B
./uxdot/uxdot-pattern-ssr-controller-client.js 604 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.68 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.07 kB
./uxdot/uxdot-repo-status-checklist.js 1.1 kB
./uxdot/uxdot-repo-status-list.js 1 kB
./uxdot/uxdot-repo-status-table.js 715 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.31 kB
./uxdot/uxdot-sidenav.js 2.57 kB
./uxdot/uxdot-spacer-tokens-table.js 2.38 kB
./uxdot/uxdot-toc.js 1.06 kB

compressed-size-action

@hellogreg hellogreg requested a review from heyMP March 10, 2025 19:28
@hellogreg hellogreg requested a review from markcaron March 10, 2025 21:20
@hellogreg hellogreg marked this pull request as ready for review March 12, 2025 21:03
Copy link
Collaborator

@markcaron markcaron left a comment

Choose a reason for hiding this comment

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

Library Guidance: Tooltip Mode

@hellogreg hellogreg merged commit 95f2745 into main Mar 19, 2025
8 checks passed
@hellogreg hellogreg deleted the docs/improved-tooltip-vs-popover-guidance branch March 19, 2025 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done ☑️
Development

Successfully merging this pull request may close these issues.

[docs] Add more detail to tooltip vs. popover guidelines
2 participants