-
Notifications
You must be signed in to change notification settings - Fork 139
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(tooltips): Creates separate tooltips writing guide. (#3999)
* docs(tooltips): Creates separate tooltips writing guide. * Edits content. * Removes unused image. * Content edits to prep for reviews. * Adds some aria attributes. * Cross link from icons guide.
- Loading branch information
Showing
5 changed files
with
90 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
...ocumentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| --- | ||
| id: Tooltips | ||
| section: UX writing | ||
| --- | ||
|
|
||
| import ArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-up-icon'; | ||
| import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; | ||
| import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; | ||
| import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; | ||
| import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; | ||
| import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; | ||
| import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon'; | ||
| import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; | ||
| import SearchMinusIcon from '@patternfly/react-icons/dist/esm/icons/search-minus-icon'; | ||
| import SearchPlusIcon from '@patternfly/react-icons/dist/esm/icons/search-plus-icon'; | ||
| import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon'; | ||
| import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; | ||
| import ExportIcon from '@patternfly/react-icons/dist/esm/icons/export-icon'; | ||
| import TaskIcon from '@patternfly/react-icons/dist/esm/icons/task-icon'; | ||
| import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; | ||
| import { Button, Icon, Tooltip, Split, SplitItem } from '@patternfly/react-core' | ||
|
|
||
| A **tooltip** is a message box that is shown when a UI element, like a button or an icon, is in a hover state. They contain short descriptions that offer additional information to help users better understand elements within a UI. | ||
|
|
||
| <Tooltip content={"This is a tooltip. It contains useful information that solves all your problems."} aria="describedby" > | ||
| <Button>I'm a button with a tooltip!</Button> | ||
| </Tooltip> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| When writing tooltips, follow these general recommendations: | ||
|
|
||
| <div class="ws-content-table"> | ||
|
|
||
| | **Don't** | **Do** | | ||
| |----------------------------------------|---------------------| | ||
| | Don't repeat information that is already available in the UI. | Do write content that is succinct, clear, and effective. | | ||
| | Don't use tooltips for critical information. | Do use tooltips for additional, non-essential information. | | ||
| | Don't end sentence fragments in a period. | Do end full sentences in a period. | | ||
| | Don’t place tooltips on question-circle icons (<QuestionCircleIcon />). Instead, use a [popover](/components/popover). | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.| | ||
|
|
||
| </div> | ||
|
|
||
| You can find additional guidance in [the tooltip design guidelines.](/components/tooltip/design-guidelines) | ||
|
|
||
| ## Icon tooltips | ||
| Icons allow you to save space in a UI and provide users with another recognition method. | ||
|
|
||
| It's often important to place tooltips on icons, especially when they aren't accompanied by a text label. This helps ensure that your users can hover over an icon to understand the action that it is linked to. When you use a tooltip with an icon, limit the content to 1 or 2 words that identify the icon accurately and clearly. | ||
|
|
||
| For example: | ||
|
|
||
| <Split> | ||
| <SplitItem> | ||
| <Tooltip content={"Settings"} aria="labelledby"> <Button variant="plain"> <CogIcon /></Button> </Tooltip> | ||
| </SplitItem> | ||
| <SplitItem> | ||
| <Tooltip content={"Copy"} aria="labelledby"> <Button variant="plain"> <CopyIcon /></Button> </Tooltip> | ||
| </SplitItem> | ||
| <SplitItem> | ||
| <Tooltip content={"Search"} aria="labelledby"> <Button variant="plain"> <SearchIcon /></Button> </Tooltip> | ||
| </SplitItem> | ||
| </Split> | ||
| <br /> | ||
|
|
||
| In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table: | ||
|
|
||
| |**Icon** | **Name** | **Tooltip content** | **Note** | | ||
| |------------|-----------|-----------|---- | | ||
| | <ArrowCircleUpIcon /> | fa-arrow-circle-up | Upgrade | | ||
| | <BellIcon /> | fa-bell | Notifications | | ||
| | <CogIcon /> | fa-cog | Settings | | ||
| | <CopyIcon /> | fa-copy | Copy | | ||
| | <DownloadIcon /> | fa-download | Download | | ||
| | <EllipsisVIcon /> | fa-ellipsis-v | More options | | ||
| | <PencilAltIcon /> | fa-pencil-alt | Edit | | ||
| | <SearchIcon /> | fa-search | Search | | ||
| | <SearchMinusIcon /> | fa-search-minus | Search minus | | ||
| | <SearchPlusIcon /> | fa-search-plus | Search plus | | ||
| | <SyncAltIcon /> | fa-sync-alt | Sync, Refresh, or Running | Choose the best fit for your scenario.| | ||
| | <TrashIcon /> | fa-trash | Delete | | ||
| | <ExportIcon /> | pficon-export | Export | | ||
| | <TaskIcon /> | pficon-task | Tasks | | ||
|
|
||
| You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters