Component Blueprints
Tooltips
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
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.
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
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#
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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#
Click here to learn more
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
Click Help to learn more.
<div style="padding-left:2rem;padding-top:6.75rem;position:relative">
<a href="#" 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#
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<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#
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button slds-button_neutral" aria-describedby="help" aria-disabled="true">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#
Bottom To Top
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>Top To Bottom
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>Right To Left
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>Left To Right
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>
</div>Toggle#
Rise
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>Fall
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
<div style="padding-left:2rem;padding-top:5rem;position:relative">
<button class="slds-button" aria-describedby="help" aria-disabled="true">Help Text</button>
<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>
</div>
</div>Styling Hooks Overview#
Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.
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.13.3
Changed
- Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g.
--sds-c-tooltip-color-text=>--sds-c-tooltip-text-color.
2.13.0
Added
- Enabled styling hooks for tooltip. See tooltip's styling hooks overview table for a full listing of the currently available hooks.
Changed
- Updated blueprint examples from anchor links to more semantically correct buttons
2.8.0
Added
- Added examples for tooltip triggered by links, buttons, and inputs