Components

Tooltips

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.

BaseBasedev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__icon slds-align-middle">
    <button class="slds-button slds-button slds-button--icon" aria-describedby="help" title="Help">
      <svg class="slds-button__icon" aria-hidden="true">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
      <span class="slds-assistive-text">Help</span>
    </button>
  </div>
</div>
<div class="slds-popover slds-popover--tooltip slds-nubbin--bottom-left" role="tooltip" id="help" style="position:absolute;top:0px;left:15px;">
  <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>

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.

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-popover
Applied to:

<div>

Outcome:

Required:

No, optional element or modifier

Comments:

--

.slds-popover--tooltip
Applied to:

.slds-popover

Outcome:

Modifier used to apply tooltip specific styles

Required:

No, optional element or modifier

Comments:

--