Tooltip - Spectrum CSS

Theme

Scale

Direction

Vars Version

Component status	Contribution
Current version	@spectrum-css/tooltip@6.1.3
Released	August 29, 2024
S2-foundations	@spectrum-css/tooltip@7.0.0-s2-foundations.12
Released	August 2, 2024

Variants

Neutral
Contribution

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Informative
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Info_14_S.svg icon in the Express workflow icon set.

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <span class="spectrum-Tooltip-label">Info</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Positive
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_14_S.svg icon in the Express workflow icon set.

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
  </svg>
  <span class="spectrum-Tooltip-label">Success</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--positive is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Negative
Contribution

Spectrum for Adobe Express uses a different icon. Use the SX_Alert_14_S.svg icon in the Express workflow icon set.

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <span class="spectrum-Tooltip-label">Warning</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--negative is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Directions
Contribution

Tooltips can be top, top left, top right, top start, top end, bottom, bottom left, bottom right, bottom start, bottom end, left, left top, left bottom, start, start top, start bottom, right, right top, right bottom, end, end top, end bottom. The default placement value is at the top.

Top

Left

Right

Bottom

Start

End

Show markup

<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Top</h4>

    <span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
      <span class="spectrum-Tooltip-label">Top</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--top-left is-open">
      <span class="spectrum-Tooltip-label">Top Left</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

     <span class="spectrum-Tooltip spectrum-Tooltip--top-right is-open">
      <span class="spectrum-Tooltip-label">Top Right</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--top-start is-open">
      <span class="spectrum-Tooltip-label">Top Start</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--top-end is-open">
      <span class="spectrum-Tooltip-label">Top End</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Left</h4>
    <span class="spectrum-Tooltip spectrum-Tooltip--left is-open">
      <span class="spectrum-Tooltip-label">Left</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--left-top is-open">
      <span class="spectrum-Tooltip-label">Left Top</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--left-bottom is-open">
      <span class="spectrum-Tooltip-label">Left Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Right</h4>
    <span class="spectrum-Tooltip spectrum-Tooltip--right is-open">
      <span class="spectrum-Tooltip-label">Right</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--right-top is-open">
      <span class="spectrum-Tooltip-label">Right Top</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--right-bottom is-open">
      <span class="spectrum-Tooltip-label">Right Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Bottom</h4>
    <span class="spectrum-Tooltip spectrum-Tooltip--bottom is-open">
      <span class="spectrum-Tooltip-label">Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--bottom-left is-open">
      <span class="spectrum-Tooltip-label">Bottom Left</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

     <span class="spectrum-Tooltip spectrum-Tooltip--bottom-right is-open">
      <span class="spectrum-Tooltip-label">Bottom Right</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--bottom-start is-open">
      <span class="spectrum-Tooltip-label">Bottom Start</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--bottom-end is-open">
      <span class="spectrum-Tooltip-label">Bottom End</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Start</h4>
    <span class="spectrum-Tooltip spectrum-Tooltip--start is-open">
      <span class="spectrum-Tooltip-label">Start</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--start-top is-open">
      <span class="spectrum-Tooltip-label">Start Top</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--start-bottom is-open">
      <span class="spectrum-Tooltip-label">Start Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">End</h4>
    <span class="spectrum-Tooltip spectrum-Tooltip--end is-open">
      <span class="spectrum-Tooltip-label">End</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--end-top is-open">
      <span class="spectrum-Tooltip-label">End Top</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>

    <span class="spectrum-Tooltip spectrum-Tooltip--end-bottom is-open">
      <span class="spectrum-Tooltip-label">End Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
    </span>
    <br><br>
  </div>
</div>

Success
Contribution

Use positive instead.

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--positive spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Error
Contribution

Use negative instead.

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--negative spectrum-Tooltip--top is-open">
  <span class="spectrum-Tooltip-label">Label</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Help
Contribution

An informative tooltip with a help icon.

Spectrum for Adobe Express uses a different icon. Use the SX_Help_14_S.svg icon in the Express workflow icon set.

Use info

Show markup

<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-Info" />
  </svg>
  <span class="spectrum-Tooltip-label">Help</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Show on hover
Contribution

A tooltip that shows on hover using CSS only. Note that this approach does not support text wrapping. Also, note that these Tooltips will likely not work on touch-enabled devices without additional client-side scripting.

Top

Left

Right

Bottom

Start

End

Show markup

<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Top</h4>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Top
      <span class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Top</span>
        <span class="spectrum-Tooltip-tip"></span>
      </span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Top Left
      <span class="spectrum-Tooltip spectrum-Tooltip--top-left">
      <span class="spectrum-Tooltip-label">Top Left</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

     <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
       Top Right
      <span class="spectrum-Tooltip spectrum-Tooltip--top-right">
      <span class="spectrum-Tooltip-label">Top Right</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Top Start
      <span class="spectrum-Tooltip spectrum-Tooltip--top-start">
      <span class="spectrum-Tooltip-label">Top Start</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Top End
      <span class="spectrum-Tooltip spectrum-Tooltip--top-end">
      <span class="spectrum-Tooltip-label">Top End</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Left</h4>
    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Left
      <span class="spectrum-Tooltip spectrum-Tooltip--left">
      <span class="spectrum-Tooltip-label">Left</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Left Top
      <span class="spectrum-Tooltip spectrum-Tooltip--left-top">
      <span class="spectrum-Tooltip-label">Left Top</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Left Bottom
      <span class="spectrum-Tooltip spectrum-Tooltip--left-bottom">
      <span class="spectrum-Tooltip-label">Left Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Right</h4>
    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Right
      <span class="spectrum-Tooltip spectrum-Tooltip--right">
      <span class="spectrum-Tooltip-label">Right</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Right Top
      <span class="spectrum-Tooltip spectrum-Tooltip--right-top">
      <span class="spectrum-Tooltip-label">Right Top</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Right Bottom
      <span class="spectrum-Tooltip spectrum-Tooltip--right-bottom">
      <span class="spectrum-Tooltip-label">Right Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Bottom</h4>
    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Bottom
      <span class="spectrum-Tooltip spectrum-Tooltip--bottom">
      <span class="spectrum-Tooltip-label">Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Bottom Left
      <span class="spectrum-Tooltip spectrum-Tooltip--bottom-left">
      <span class="spectrum-Tooltip-label">Bottom Left</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

     <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
       Bottom Right
      <span class="spectrum-Tooltip spectrum-Tooltip--bottom-right">
      <span class="spectrum-Tooltip-label">Bottom Right</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Bottom Start
      <span class="spectrum-Tooltip spectrum-Tooltip--bottom-start">
      <span class="spectrum-Tooltip-label">Bottom Start</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Bottom End
      <span class="spectrum-Tooltip spectrum-Tooltip--bottom-end">
      <span class="spectrum-Tooltip-label">Bottom End</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Start</h4>
    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Start
      <span class="spectrum-Tooltip spectrum-Tooltip--start">
      <span class="spectrum-Tooltip-label">Start</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Start Top
      <span class="spectrum-Tooltip spectrum-Tooltip--start-top">
      <span class="spectrum-Tooltip-label">Start Top</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      Start Bottom
      <span class="spectrum-Tooltip spectrum-Tooltip--start-bottom">
      <span class="spectrum-Tooltip-label">Start Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>

  <div class="spectrum-Examples-item">
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">End</h4>
    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      End
      <span class="spectrum-Tooltip spectrum-Tooltip--end">
      <span class="spectrum-Tooltip-label">End</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      End Top
      <span class="spectrum-Tooltip spectrum-Tooltip--end-top">
      <span class="spectrum-Tooltip-label">End Top</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>

    <span class="u-tooltip-showOnHover" style="margin: 15px 50px; cursor: default;">
      End Bottom
      <span class="spectrum-Tooltip spectrum-Tooltip--end-bottom">
      <span class="spectrum-Tooltip-label">End Bottom</span>
      <span class="spectrum-Tooltip-tip"></span>
      </span>
    </span>
    <br><br>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Version 6.1.1

This patch includes tooltip placement adjustments for RTL bugs and increased coverage with Chromatic VRTs. Some clarification on placements:

If you use a Start or End placement, the tooltip will change to the other side of the source when the text direction (LTR/RTL) is changed
If you use a Left or Right placement, the tooltip will not change sides when text direction is changed

As a result of the placement specifications, some placements intentionally use non-logical properties in the CSS (particularly for tooltips that show on hover).

Tooltip now has 22 directions

10 of the new directions are logical and should be tested both left-to-right and right-to-left

Spectrum CSS

NeutralContribution

InformativeContribution

PositiveContribution

NegativeContribution

DirectionsContribution

Top

Left

Right

Bottom

Start

End

SuccessContribution

ErrorContribution

HelpContribution

Show on hoverContribution

Top

Left

Right

Bottom

Start

End

Neutral
Contribution

Informative
Contribution

Positive
Contribution

Negative
Contribution

Directions
Contribution

Success
Contribution

Error
Contribution

Help
Contribution

Show on hover
Contribution