-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
--------- Co-authored-by: itsdeyan <[email protected]>
- Loading branch information
Showing
5 changed files
with
168 additions
and
10 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
42 changes: 42 additions & 0 deletions
42
apps/for-everyone-website/src/components/OnboardingTooltipAnatomy.astro
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,42 @@ | ||
| --- | ||
| import { TooltipOnboarding } from '@financial-times/o3-tooltip/jsx'; | ||
| import { Button } from '@financial-times/o3-button/jsx'; | ||
| import '@financial-times/o3-tooltip/css/whitelabel.css'; | ||
| import '@financial-times/o3-tooltip/css/internal.css'; | ||
| import '@financial-times/o3-tooltip/css/core.css'; | ||
| import '@financial-times/o3-tooltip/css/professional.css'; | ||
| import '@financial-times/o3-tooltip/css/sustainable-views.css'; | ||
| --- | ||
| <svg class="not-content" aria-describedby="An annotated image of an onboarding tooltip." width="700" height="220" viewBox="0 0 700 220" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <foreignObject width="700" height="220" > | ||
| <div style="position: relative; width: 500px; height: 300px;"> | ||
| <Button attributes={{id: 'demo-onboarding-tooltip', style: { | ||
| position: 'absolute', | ||
| right: '60px', | ||
| top: '100px' | ||
| }}} label="Tooltip target" type="secondary" /> | ||
| <TooltipOnboarding targetId="demo-onboarding-tooltip" content="Lorem ipsum muta est. Scribere possum quicquid hic volo, et nihil potes de illo." title="Heading" contentId="demo-onboarding-tooltip-contnent" placement="left" /> | ||
| </div> | ||
| </foreignObject> | ||
| <path d="M86.0723 10.5C86.0723 4.97715 90.5494 0.5 96.0723 0.5V0.5C101.595 0.5 106.072 4.97715 106.072 10.5V10.5C106.072 16.0228 101.595 20.5 96.0723 20.5V20.5C90.5494 20.5 86.0723 16.0228 86.0723 10.5V10.5Z" fill="#990F3D"/> | ||
| <path d="M97.4103 6.884V15.5H95.9823V8.636L94.0863 9.596V8.12L96.5583 6.884H97.4103Z" fill="white"/> | ||
| <path d="M95.0723 20.5H97.0723V64.5C97.0723 65.0523 96.6246 65.5 96.0723 65.5V65.5C95.52 65.5 95.0723 65.0523 95.0723 64.5V20.5Z" fill="#990F3D"/> | ||
| <path d="M203.072 157.5C203.072 156.948 203.52 156.5 204.072 156.5V156.5C204.625 156.5 205.072 156.948 205.072 157.5V199.5H203.072V157.5Z" fill="#990F3D"/> | ||
| <path d="M194.072 209.5C194.072 203.977 198.549 199.5 204.072 199.5V199.5C209.595 199.5 214.072 203.977 214.072 209.5V209.5C214.072 215.023 209.595 219.5 204.072 219.5V219.5C198.549 219.5 194.072 215.023 194.072 209.5V209.5Z" fill="#990F3D"/> | ||
| <path d="M203.668 208.98C204.252 208.98 204.78 209.088 205.252 209.304C205.724 209.52 206.096 209.84 206.368 210.264C206.648 210.68 206.788 211.192 206.788 211.8C206.788 212.4 206.648 212.912 206.368 213.336C206.088 213.76 205.708 214.084 205.228 214.308C204.748 214.532 204.204 214.644 203.596 214.644C203.116 214.644 202.696 214.58 202.336 214.452C201.984 214.324 201.668 214.156 201.388 213.948V212.424C201.692 212.72 202.02 212.952 202.372 213.12C202.724 213.288 203.108 213.372 203.524 213.372C203.876 213.372 204.196 213.316 204.484 213.204C204.78 213.084 205.012 212.908 205.18 212.676C205.356 212.436 205.444 212.144 205.444 211.8C205.444 211.456 205.356 211.168 205.18 210.936C205.012 210.704 204.78 210.528 204.484 210.408C204.196 210.28 203.872 210.216 203.512 210.216C203.168 210.216 202.852 210.252 202.564 210.324C202.284 210.388 201.984 210.484 201.664 210.612L202.18 205.884H206.356V207.156H203.26L203.056 209.04C203.192 209.016 203.304 209 203.392 208.992C203.48 208.984 203.572 208.98 203.668 208.98Z" fill="white"/> | ||
| <path d="M0.0722656 127.5C0.0722656 121.977 4.54942 117.5 10.0723 117.5V117.5C15.5951 117.5 20.0723 121.977 20.0723 127.5V127.5C20.0723 133.023 15.5951 137.5 10.0723 137.5V137.5C4.54942 137.5 0.0722656 133.023 0.0722656 127.5V127.5Z" fill="#990F3D"/> | ||
| <path d="M9.75192 131.228H12.7999V132.5H7.19592L9.70392 129.224C9.97592 128.864 10.2279 128.528 10.4599 128.216C10.6919 127.896 10.8759 127.584 11.0119 127.28C11.1559 126.968 11.2279 126.648 11.2279 126.32C11.2279 125.944 11.1119 125.64 10.8799 125.408C10.6559 125.168 10.3159 125.048 9.85992 125.048C9.53192 125.048 9.21592 125.108 8.91192 125.228C8.61592 125.34 8.33992 125.488 8.08392 125.672C7.82792 125.848 7.59992 126.036 7.39992 126.236V124.796C7.69592 124.484 8.07192 124.232 8.52792 124.04C8.99192 123.84 9.47992 123.74 9.99192 123.74C10.5279 123.74 10.9919 123.844 11.3839 124.052C11.7839 124.252 12.0919 124.544 12.3079 124.928C12.5319 125.304 12.6439 125.752 12.6439 126.272C12.6439 126.656 12.5639 127.036 12.4039 127.412C12.2519 127.788 12.0479 128.164 11.7919 128.54C11.5359 128.916 11.2559 129.3 10.9519 129.692L9.75192 131.228Z" fill="white"/> | ||
| <path d="M20.0723 126.5H63.0723C63.6246 126.5 64.0723 126.948 64.0723 127.5V127.5C64.0723 128.052 63.6246 128.5 63.0723 128.5H20.0723V126.5Z" fill="#990F3D"/> | ||
| <path d="M265.072 10.5C265.072 4.97715 269.549 0.5 275.072 0.5V0.5C280.595 0.5 285.072 4.97715 285.072 10.5V10.5C285.072 16.0228 280.595 20.5 275.072 20.5V20.5C269.549 20.5 265.072 16.0228 265.072 10.5V10.5Z" fill="#990F3D"/> | ||
| <path d="M272.482 8.156V6.884H277.618L275.722 10.376C276.114 10.464 276.454 10.62 276.742 10.844C277.038 11.068 277.266 11.348 277.426 11.684C277.586 12.02 277.666 12.404 277.666 12.836C277.666 13.412 277.53 13.912 277.258 14.336C276.994 14.752 276.642 15.076 276.202 15.308C275.762 15.532 275.282 15.644 274.762 15.644C274.202 15.644 273.734 15.576 273.358 15.44C272.99 15.296 272.67 15.12 272.398 14.912V13.424C272.702 13.72 273.05 13.952 273.442 14.12C273.842 14.288 274.25 14.372 274.666 14.372C275.01 14.372 275.306 14.32 275.554 14.216C275.802 14.104 275.994 13.936 276.13 13.712C276.274 13.488 276.346 13.2 276.346 12.848C276.346 12.472 276.238 12.164 276.022 11.924C275.806 11.676 275.51 11.496 275.134 11.384C274.766 11.264 274.35 11.204 273.886 11.204L275.53 8.156H272.482Z" fill="white"/> | ||
| <path d="M274.072 20.5H276.072V64.5C276.072 65.0523 275.625 65.5 275.072 65.5V65.5C274.52 65.5 274.072 65.0523 274.072 64.5V20.5Z" fill="#990F3D"/> | ||
| <path transform="translate(123 -5)" d="M203.072 157.5C203.072 156.948 203.52 156.5 204.072 156.5V156.5C204.625 156.5 205.072 156.948 205.072 157.5V199.5H203.072V157.5Z" fill="#990F3D"/> | ||
| <path transform="translate(123 -5)" d="M194.072 209.5C194.072 203.977 198.549 199.5 204.072 199.5V199.5C209.595 199.5 214.072 203.977 214.072 209.5V209.5C214.072 215.023 209.595 219.5 204.072 219.5V219.5C198.549 219.5 194.072 215.023 194.072 209.5V209.5Z" fill="#990F3D"/> | ||
| <path transform="translate(-23 94)" d="M351.263 105.884L348.731 111.296H350.831V109.472H352.151V111.296H353.375V112.532H352.151V114.5H350.831V112.532H346.679L349.787 105.884H351.263Z" fill="#ffffff"/> | ||
| </svg> | ||
|
|
||
|
|
||
| <script> | ||
| import '@financial-times/o3-tooltip'; | ||
| </script> |
40 changes: 40 additions & 0 deletions
40
apps/for-everyone-website/src/components/ToggletipAnatomy.astro
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,40 @@ | ||
| --- | ||
| import { TooltipToggle } from '@financial-times/o3-tooltip/jsx'; | ||
| import '@financial-times/o3-tooltip/css/whitelabel.css'; | ||
| import '@financial-times/o3-tooltip/css/internal.css'; | ||
| import '@financial-times/o3-tooltip/css/core.css'; | ||
| import '@financial-times/o3-tooltip/css/professional.css'; | ||
| import '@financial-times/o3-tooltip/css/sustainable-views.css'; | ||
| --- | ||
|
|
||
|
|
||
| <svg class="not-content" aria-describedby="An annotated image of a toggletip. The button text is marked (1, label); the outer box of the button marked to (2, container); the left aligned icon of the button marked (3)." style="display: block; margin: 0 auto" width="700" height="220" viewBox="0 0 700 220" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <foreignObject width="700" height="220" > | ||
| <div style="position: relative; width: 500px; height: 300px; overflow: hidden;"> | ||
| <div style="position: relative; top: 78px; left: 295px"> | ||
| <TooltipToggle title="" content="Lorem ipsum muta est. Scribere possum quicquid hic volo, et nihil potes de illo." placement="left" /> | ||
| </div> | ||
| </div> | ||
| </foreignObject> | ||
| <path d="M319.072 90.5C319.072 89.9477 319.52 89.5 320.072 89.5H340.072V91.5H320.072C319.52 91.5 319.072 91.0523 319.072 90.5V90.5Z" fill="#990F3D"/> | ||
| <path d="M340.072 90.5C340.072 84.9772 344.549 80.5 350.072 80.5V80.5C355.595 80.5 360.072 84.9772 360.072 90.5V90.5C360.072 96.0228 355.595 100.5 350.072 100.5V100.5C344.549 100.5 340.072 96.0228 340.072 90.5V90.5Z" fill="#990F3D"/> | ||
| <path d="M351.41 86.884V95.5H349.982V88.636L348.086 89.596V88.12L350.558 86.884H351.41Z" fill="white"/> | ||
| <path transform="translate(0 -40)" d="M0.0722656 92C0.0722656 86.4772 4.54942 82 10.0723 82V82C15.5951 82 20.0723 86.4772 20.0723 92V92C20.0723 97.5228 15.5951 102 10.0723 102V102C4.54942 102 0.0722656 97.5228 0.0722656 92V92Z" fill="#990F3D"/> | ||
| <path transform="translate(0 -40)" d="M9.75192 95.728H12.7999V97H7.19592L9.70392 93.724C9.97592 93.364 10.2279 93.028 10.4599 92.716C10.6919 92.396 10.8759 92.084 11.0119 91.78C11.1559 91.468 11.2279 91.148 11.2279 90.82C11.2279 90.444 11.1119 90.14 10.8799 89.908C10.6559 89.668 10.3159 89.548 9.85992 89.548C9.53192 89.548 9.21592 89.608 8.91192 89.728C8.61592 89.84 8.33992 89.988 8.08392 90.172C7.82792 90.348 7.59992 90.536 7.39992 90.736V89.296C7.69592 88.984 8.07192 88.732 8.52792 88.54C8.99192 88.34 9.47992 88.24 9.99192 88.24C10.5279 88.24 10.9919 88.344 11.3839 88.552C11.7839 88.752 12.0919 89.044 12.3079 89.428C12.5319 89.804 12.6439 90.252 12.6439 90.772C12.6439 91.156 12.5639 91.536 12.4039 91.912C12.2519 92.288 12.0479 92.664 11.7919 93.04C11.5359 93.416 11.2559 93.8 10.9519 94.192L9.75192 95.728Z" fill="white"/> | ||
| <path transform="translate(0 -40)" d="M20.0723 91H54.0723C54.6246 91 55.0723 91.4477 55.0723 92V92C55.0723 92.5523 54.6246 93 54.0723 93H20.0723V91Z" fill="#990F3D"/> | ||
| <path d="M285.072 10C285.072 4.47715 289.549 0 295.072 0V0C300.595 0 305.072 4.47715 305.072 10V10C305.072 15.5228 300.595 20 295.072 20V20C289.549 20 285.072 15.5228 285.072 10V10Z" fill="#990F3D"/> | ||
| <path d="M292.482 7.656V6.384H297.618L295.722 9.876C296.114 9.964 296.454 10.12 296.742 10.344C297.038 10.568 297.266 10.848 297.426 11.184C297.586 11.52 297.666 11.904 297.666 12.336C297.666 12.912 297.53 13.412 297.258 13.836C296.994 14.252 296.642 14.576 296.202 14.808C295.762 15.032 295.282 15.144 294.762 15.144C294.202 15.144 293.734 15.076 293.358 14.94C292.99 14.796 292.67 14.62 292.398 14.412V12.924C292.702 13.22 293.05 13.452 293.442 13.62C293.842 13.788 294.25 13.872 294.666 13.872C295.01 13.872 295.306 13.82 295.554 13.716C295.802 13.604 295.994 13.436 296.13 13.212C296.274 12.988 296.346 12.7 296.346 12.348C296.346 11.972 296.238 11.664 296.022 11.424C295.806 11.176 295.51 10.996 295.134 10.884C294.766 10.764 294.35 10.704 293.886 10.704L295.53 7.656H292.482Z" fill="white"/> | ||
| <path d="M294.072 20H296.072V85C296.072 85.5523 295.625 86 295.072 86V86C294.52 86 294.072 85.5523 294.072 85V20Z" fill="#990F3D"/> | ||
| <path d="M170.964 135C170.964 134.448 171.412 134 171.964 134V134C172.516 134 172.964 134.448 172.964 135V161H170.964V135Z" fill="#990F3D"/> | ||
| <path d="M161.964 171C161.964 165.477 166.441 161 171.964 161V161C177.487 161 181.964 165.477 181.964 171V171C181.964 176.523 177.487 181 171.964 181V181C166.441 181 161.964 176.523 161.964 171V171Z" fill="#990F3D"/> | ||
| <path d="M173.155 167.384L170.623 172.796H172.723V170.972H174.043V172.796H175.267V174.032H174.043V176H172.723V174.032H168.571L171.679 167.384H173.155Z" fill="white"/> | ||
| </svg> | ||
|
|
||
| <script> | ||
| import '@financial-times/o3-tooltip'; | ||
| </script> | ||
|
|
||
|
|
||
|
|
||
|
|
74 changes: 74 additions & 0 deletions
74
apps/for-everyone-website/src/content/docs/components/tooltip.mdx
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,74 @@ | ||
| --- | ||
| title: Tooltips | ||
| description: Use tooltips for onboarding and providing extra, non-essential information. | ||
| sidebar: | ||
| badge: | ||
| text: New | ||
| variant: tip | ||
| --- | ||
|
|
||
| import {default as ToggletipAnatomy} from '../../../components/ToggletipAnatomy.astro'; | ||
| import {default as OnboardingTooltipAnatomy} from '../../../components/OnboardingTooltipAnatomy.astro'; | ||
|
|
||
| There are two kinds of tooltips available: | ||
|
|
||
| - [Onboarding Tooltips](#onboarding-tooltips), to facilitate an introduction to new features or functionality. | ||
| - [Toggle Tooltips](#toggle-tooltips), to provide additional contextual information. | ||
|
|
||
| ## Onboarding Tooltips | ||
|
|
||
| Onboarding Tooltips help for a smoother introduction to new features or functionality. | ||
|
|
||
| - Contain only descriptive unformatted text with an optional title for emphasis. | ||
| - Should provide insights or tips that enhance, but aren't critical to, user understanding. | ||
| - Appear only once; dismissing them removes them permanently. | ||
|
|
||
| ### Anatomy | ||
|
|
||
| <OnboardingTooltipAnatomy /> | ||
|
|
||
| 1. <strong>Heading (optional)</strong>: It's best to omit the tooltip heading as | ||
| emphasis cannot be portrayed to screen reader users. Employ a heading only | ||
| for presentational reasons, provided emphasis is not required for | ||
| understanding. | ||
| 2. <strong>Text</strong>: The main content providing detailed explanation or | ||
| information. | ||
| 3. <strong>Close button (×)</strong>: This button dismisses the tooltip. Once | ||
| closed, the tooltip should not reappear for the user. | ||
| 4. <strong>Arrow</strong>: A directional arrow that can point towards any side, | ||
| indicating the source of the information or context. | ||
| 5. <strong>Container</strong>: The encompassing frame that holds the message | ||
| text and ensures it's distinct from other UI elements. | ||
|
|
||
| ### Usage Guidelines | ||
|
|
||
| - Ensure onboarding tooltips do not obstruct other interface elements. | ||
| - Use headings only for presentational reasons, provided emphasis is not required for understanding, as emphasis is not provided for screen reader users. | ||
| - Use them to highlight new features or assist with user onboarding. | ||
|
|
||
| ## Toggle Tooltips | ||
|
|
||
| Toggle Tooltips ("Toggletips") are compact pieces of information designed to offer additional insights when needed. | ||
|
|
||
| - Contain only descriptive text without any formatting. | ||
| - Should provide relevant information that may be helpful, but is not required. | ||
| - Hidden by default. | ||
| - Toggle visibility through user interaction with the information icon. | ||
|
|
||
| ### Anatomy | ||
|
|
||
| <ToggletipAnatomy /> | ||
|
|
||
| 1. <strong>Trigger</strong>: A compact, circular icon marked with an information | ||
| symbol that activates the toggletip's visibility. | ||
| 2. <strong>Text</strong>: The main content providing detailed explanation or | ||
| information. | ||
| 3. <strong>Arrow</strong>: A directional arrow that can point towards any side, | ||
| indicating the source of the information or context. | ||
| 4. <strong>Container</strong>: The encompassing frame that holds the message | ||
| text and ensures it's distinct from other UI elements. | ||
|
|
||
| ### Usage Guidelines | ||
|
|
||
| - Ensure toggletips do not obstruct other interface elements. | ||
| - Use toggletips to provide additional context, provided it is not essential. |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.