Component Blueprints

Tooltips

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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.

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#

Help Text
<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#

Click here to learn more
<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#

Bottom To Top
Help Text
<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>
Top To Bottom
Help Text
<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>
Right To Left
Help Text
<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>
Left To Right
Help Text
<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#

Rise
Help Text
<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>
Fall
Help Text
<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.slds-popover_tooltip
Summary

Initializes a tooltip

Supportdev-ready
Restrict[role="tooltip"]
VariantTrue
Selector.slds-rise-from-ground
Summary

Toggles on tooltip

Restrict.slds-popover_tooltip
ModifierTrue
Selector.slds-fall-into-ground
Summary

Toggles off tooltip

Restrict.slds-popover_tooltip
ModifierTrue
Selector.slds-slide-from-bottom-to-top
Summary

Slides tooltip from bottom to top

Restrict.slds-popover_tooltip
ModifierTrue
Selector.slds-slide-from-top-to-bottom
Summary

Slides tooltip from top to bottom

Restrict.slds-popover_tooltip
ModifierTrue
Selector.slds-slide-from-right-to-left
Summary

Slides tooltip from right to left

Restrict.slds-popover_tooltip
ModifierTrue
Selector.slds-slide-from-left-to-right
Summary

Slides tooltip from left to right

Restrict.slds-popover_tooltip
ModifierTrue

Tooltips Release Notes

2.8.0

Added

  • Added examples for tooltip triggered by links, buttons, and inputs