Tooltips
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
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>
.
Base#
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
Examples#
As an icon link#
<div style="padding-left:2rem;padding-top:6.75rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">
<span class="slds-icon_container slds-icon-utility-info">
<svg class="slds-icon slds-icon slds-icon_xx-small slds-icon-text-default" aria-hidden="true">
As a Button Icon#
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help" aria-disabled="true" title="Help">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
As a Button#
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button slds-button_neutral" aria-describedby="help">Button</button>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:-4px;left:45px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
Modifiers#
Motion#
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-bottom-to-top" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-top-to-bottom" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-right-to-left" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-slide-from-left-to-right" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
Toggle#
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-rise-from-ground" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<a href="javascript:void(0)" aria-describedby="help">Help Text</a>
<div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left slds-fall-into-ground" role="tooltip" id="help" style="position:absolute;top:-4px;left:35px">
<div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</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 |
Tooltips Release Notes
2.8.0
Added
- Added examples for tooltip triggered by links, buttons, and inputs