Skip to content
Snippets Groups Projects
Commit fb6f50a0 authored by Russell Dickenson's avatar Russell Dickenson Committed by Jeremy Elder
Browse files

feat(Tooltip): Add tooltip structure diagram

parent b0a6d839
No related branches found
No related tags found
1 merge request!3208feat(Tooltip): Add tooltip structure diagram
......@@ -16,7 +16,11 @@ related:
## Structure
<todo>Add tooltip structure image.</todo>
<figure-img alt="Numbered diagram of a tooltip structure" label="Tooltip structure" src="/img/tooltip-structure.svg"></figure-img>
1. **Container**: Wraps the content.
1. **Text**: Concisely describes the referring element or its purpose.
1. **Tip**: Points to the referring element.
## Guidelines
......@@ -24,7 +28,7 @@ related:
- Show the same data in a different format, such as date or timestamps.
- Display a full string of text that is shortened with an ellipsis (`…`).
- Provide context for unlabelled items such as [icon buttons](/components/button), except for [certain cases](#when-not-to-use).
- Provide context for unlabeled items such as [icon buttons](/components/button), except for [certain cases](#when-not-to-use).
### When not to use
......@@ -43,14 +47,14 @@ Consider using a [popover](/components/popover) for the following scenarios:
- When there isn’t enough space in the viewport, the tooltip is moved to the side or below as needed.
- If it blocks related content, the preferred tooltip placement can be manually set.
- Should have no space (0px) between themselves and their target.
- Remain in place while the cursor moves within the target.
- Remain in place while the cursor moves within the target.
- Should never obscure the target element.
- Content within a tooltip uses center-alignment.
- Wraps when the content is wider than the max-width.
### Behavior
- Fades in upon hover or focus on the trigger element.
- Fades in upon hover or focus on the trigger element.
- Remains open until the cursor moves outside of itself or the trigger, or focus is moved away from the trigger.
#### Tooltip delay
......@@ -60,12 +64,12 @@ Similar to [popovers](/components/popover), a tooltip has a default delay of `50
- A user doesn’t accidentally hover an element with a tooltip, which might cover an adjacent element they intended to select.
- The UI isn't constantly showing tooltips when a user is moving their mouse over the page.
Overriding the `show` delay for a tooltip is strongly discouraged for the reasons above, but there are useful circumstances for a tooltip to appear instantly. For example, pipeline icons that are visually the same, but have unique tooltip text that a user relies on to determine the pipeline status. Here, a delay would make it cumbersome to decipher the pipeline while hovering from one icon to the next. To shorten the delay in these cases, utilize `ds###` in the tooltip directive, where `###` is the milliseconds of delay.
Overriding the `show` delay for a tooltip is strongly discouraged for the reasons above, but there are useful circumstances for a tooltip to appear instantly. For example, pipeline icons that are visually the same, but have unique tooltip text that a user relies on to determine the pipeline status. Here, a delay would make it cumbersome to decipher the pipeline while hovering from one icon to the next. To shorten the delay in these cases, utilize `ds###` in the tooltip directive, where `###` is the milliseconds of delay.
Here's an example of a tooltip directive with a `0ms` delay (instant) on `show`:
```vue
<gl-button
<gl-button
v-gl-tooltip.ds0
...
/>
......@@ -73,7 +77,7 @@ Here's an example of a tooltip directive with a `0ms` delay (instant) on `show`:
### Content
- Should be short and concise.
- Should be short and concise.
- Shouldn’t repeat information that is shown near the referring element.
### Accessibility
......
<svg width="158" height="98" viewBox="0 0 158 98" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#tooltip-structure__a)"><rect x="24" y="24" width="134" height="32" rx="4" fill="#535158"/><rect x="36" y="36" width="110" height="8" rx="2" fill="#fff"/><path d="M87 56h8l-4 4-4-4Z" fill="#535158"/><circle cx="91" cy="78" r="16" fill="#7B58CF"/><circle cx="91" cy="78" r="18" stroke="#7B58CF" stroke-opacity=".3" stroke-width="4"/><path d="M92.397 76.978c.862.228 1.521.635 1.978 1.221.457.58.686 1.307.686 2.18 0 1.207-.408 2.156-1.222 2.848-.809.685-1.93 1.028-3.366 1.028-.604 0-1.22-.056-1.846-.167a11.884 11.884 0 0 1-1.846-.483v-1.767a8.55 8.55 0 0 0 1.767.694 6.79 6.79 0 0 0 1.731.229c.973 0 1.72-.22 2.242-.66.521-.439.782-1.072.782-1.898 0-.762-.261-1.365-.782-1.81-.522-.452-1.228-.677-2.119-.677H89.05v-1.46h1.353c.815 0 1.45-.178 1.908-.535.457-.358.685-.856.685-1.494 0-.674-.214-1.19-.642-1.547-.421-.364-1.025-.545-1.81-.545a7.85 7.85 0 0 0-1.617.175 11.47 11.47 0 0 0-1.75.528v-1.635a21.833 21.833 0 0 1 1.89-.422 9.018 9.018 0 0 1 1.477-.14c1.277 0 2.297.322 3.059.966.767.64 1.15 1.489 1.15 2.55 0 .72-.201 1.32-.605 1.801-.399.48-.982.82-1.75 1.02Z" fill="#fff"/><circle cx="117" cy="40" r="16" fill="#7B58CF"/><circle cx="117" cy="40" r="18" stroke="#7B58CF" stroke-opacity=".3" stroke-width="4"/><path d="M114.855 44.506h6.03V46h-7.972v-1.494a353.699 353.699 0 0 0 2.874-3.059 72.85 72.85 0 0 0 1.696-1.872c.586-.715.982-1.292 1.187-1.731.205-.446.308-.9.308-1.363 0-.732-.217-1.306-.651-1.722-.428-.416-1.016-.624-1.766-.624-.534 0-1.093.096-1.679.29a9.412 9.412 0 0 0-1.863.879V33.51a9.607 9.607 0 0 1 1.775-.65 7.119 7.119 0 0 1 1.731-.22c1.284 0 2.315.342 3.094 1.028.785.68 1.178 1.573 1.178 2.68 0 .563-.132 1.126-.396 1.688-.257.563-.679 1.184-1.265 1.863-.328.381-.806.909-1.433 1.582-.621.674-1.57 1.682-2.848 3.024Z" fill="#fff"/><circle cx="20" cy="20" r="16" fill="#7B58CF"/><circle cx="20" cy="20" r="18" stroke="#7B58CF" stroke-opacity=".3" stroke-width="4"/><path d="M16.95 24.515h2.76V14.6l-3.305 1.59v-1.705l3.287-1.564h1.776v11.593h2.724V26H16.95v-1.485Z" fill="#fff"/></g><defs><clipPath id="tooltip-structure__a"><path fill="#fff" d="M0 0h158v98H0z"/></clipPath></defs></svg>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment