Tooltips
- HTML/CSS:Dev Ready
- Layout:Desktop Only
A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content.
Base
Preview
About Base
The tooltip should be positioned with JavaScript.
You can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an aria-describedby attribute that points to the tooltip ID of the tooltip.
About Tooltips
Nubbins are indicators that inform the user of the direction of the content associated with the tooltip. A tooltip can accept the following nubbin position classes, .slds-nubbin_left, .slds-nubbin_left-top, .slds-nubbin_left-bottom, .slds-nubbin_top-left, .slds-nubbin_top-right, .slds-nubbin_right-top, .slds-nubbin_right-bottom, .slds-nubbin_bottom-left, .slds-nubbin_bottom-right.
Learn more about how to use them at the Nubbins documentation.
Accessibility
Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse. Examples of focusable elements include links, buttons, and inputs. Give the tooltip an ID and use that as the value of the aria-describedby attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content.
When using a link as the focusable element to show a tooltip, add a <div> at the bottom of the tooltip bubble that includes a description of where the link will take the user. Add aria-hidden='true' to this element, and ensure that the link text itself matches the text within this <div>.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-popover_tooltip |
|---|---|
| Summary | Initializes a tooltip |
| Support | dev-ready |
| Restrict | [role="tooltip"] |
| Variant | True |
| Selector | .slds-rise-from-ground |
|---|---|
| Summary | Toggles on tooltip |
| Restrict | .slds-popover_tooltip |
| Modifier | True |
| Selector | .slds-fall-into-ground |
|---|---|
| Summary | Toggles off tooltip |
| Restrict | .slds-popover_tooltip |
| Modifier | True |
| Selector | .slds-slide-from-bottom-to-top |
|---|---|
| Summary | Slides tooltip from bottom to top |
| Restrict | .slds-popover_tooltip |
| Modifier | True |
| Selector | .slds-slide-from-top-to-bottom |
|---|---|
| Summary | Slides tooltip from top to bottom |
| Restrict | .slds-popover_tooltip |
| Modifier | True |
| Selector | .slds-slide-from-right-to-left |
|---|---|
| Summary | Slides tooltip from right to left |
| Restrict | .slds-popover_tooltip |
| Modifier | True |
| Selector | .slds-slide-from-left-to-right |
|---|---|
| Summary | Slides tooltip from left to right |
| Restrict | .slds-popover_tooltip |
| Modifier | True |