Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
</div> </div> <!-- Interactive Examples --> <h2 class="h2 mb-3">Interactive Examples</h2> <div class="example-section"> <h3 class="h4 mb-3">Icon Buttons with Tooltips</h3> <div class="d-flex gap-3 mb-3"> <div class="tooltip-container"> <button class="icon-button" aria-label="Edit"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </button> <div class="tooltip-content" role="tooltip">Edit</div> </div> <div class="tooltip-container"> <button class="icon-button" aria-label="Favorite"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </button> <div class="tooltip-content" role="tooltip">Favorite</div> </div> <div class="tooltip-container"> <button class="icon-button" aria-label="Sponsor"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 0 0 8 13.393a20.561 20.561 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5ZM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 0 1-.31-.17 22.075 22.075 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 0 1-3.744 2.584l-.018.01-.006.003h-.002L8 14.25Zm0 0-.345.666a.752.752 0 0 1-.69 0L8 14.25Z"></path> </svg> </button> <div class="tooltip-content" role="tooltip">Sponsor</div> </div> </div> </div> <!-- Position Examples --> <div class="example-section"> <h3 class="h4 mb-3">Tooltip Positions</h3> <div class="position-demo"> <div class="tooltip-container"> <button class="btn">Bottom (default)</button> <div class="tooltip-content" role="tooltip">Bottom tooltip</div> </div> <div class="tooltip-container tooltip-top"> <button class="btn">Top</button> <div class="tooltip-content" role="tooltip">Top tooltip</div> </div> <div class="tooltip-container tooltip-left"> <button class="btn">Left</button> <div class="tooltip-content" role="tooltip">Left tooltip</div> </div> <div class="tooltip-container tooltip-right"> <button class="btn">Right</button> <div class="tooltip-content" role="tooltip">Right tooltip</div> </div> </div> </div> <!-- Options Section --> <h2 class="h2 mb-3">Options</h2> <h3 class="h3 mb-3">Label</h3> <div class="d-flex flex-column flex-lg-row gap-4 mb-4"> <img width="456" alt="icon button with tooltip as a label" src="https://github.com/primer/design/assets/18661030/b06d4fc2-d4e6-482d-a9b9-05eb866ce3e1" /> <p class="mt-0"> Icon buttons have a visually hidden label utilizing <code>aria-label</code>. To instead display that label in a tooltip, the <code>label</code> option should be used. The <code>label</code> serves as the accessible name for the control utilizing <code>aria-labelledby</code> under the hood. </p> </div> <h3 class="h3 mb-3">Description</h3> <p class="mb-4"> The <code>description</code> is intended to supplement the control's text label by utilizing <code>aria-describedby</code> under the hood, and will be announced to a screen reader in addition to the label. Keep the description short and concise. </p> <!-- Alternatives Section --> <h2 class="h2 mb-3" id="alternatives-to-tooltips">Alternatives to tooltips</h2> <p class="mb-4"> Before adding a tooltip, please consider: Is this information essential and necessary? Can the UI be made clearer? Can the information be shown on the page by default? See Tooltip alternatives for more accessible alternatives. </p> <h3 class="h3 mb-3">1. Persist the content</h3> <p class="mb-3"> If possible, persist the content so it's always available rather than using a tooltip, which hides content by default. This ensures that the content is always discovered and surfaced to users regardless of device. </p> <div class="do-dont-container"> <div class="do-dont-item do-item"> <img width="100%" class="mb-2" alt="Information about how many discussions can be pinned added to the confirmation dialog" src="https://github.com/primer/primitives/assets/18661030/e66db2af-723c-4cfa-8d97-47a42f17047d" /> <p class="f6 color-fg-muted mb-0">Find an appropriate permanent place to display additional information.</p> </div> <div class="do-dont-item dont-item"> <img width="100%" class="mb-2" alt="Information about how many discussions can be pinned within tooltip on non-interactive element" src="https://github.com/primer/primitives/assets/18661030/283a5677-ea86-40de-9a84-6751a9b531f8" /> <p class="f6 color-fg-muted mb-0">Don't use a tooltip to add additional helpful information</p> </div> </div> <!-- Additional Resources --> <h2 class="h2 mb-3">Additional resources</h2> <ul class="mb-4"> <li><a href="https://heydonworks.com/article/your-tooltips-are-bogus/" class="Link" target="_blank">Your tooltips are bogus</a></li> <li><a href="https://github.com/github/erblint-github/blob/main/docs/rules/accessibility/no-aria-label-misuse-counter.md#no-aria-label-misuse-counter" class="Link" target="_blank">erb lint rule: NoAriaLabelMisuseCounter</a></li> <li><a href="https://github.com/primer/view_components/blob/main/lib/primer/view_components/linters/tooltipped_migration.rb" class="Link" target="_blank">Rails tooltip linter</a></li> </ul> <!-- Feedback Section --> <h2 class="h2 mb-3" id="feedback">Feedback</h2> <p class="mb-4"> Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub. </p> </div></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">