<figure-imgalt="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.