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.

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">

Examples

As an icon link

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">

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">

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">

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">
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">
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">
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">

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">
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">