• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Tooltip

Component status
Contribution
Current version@spectrum-css/tooltip@5.3.5
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Neutral
Contribution

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Info Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Success Lorem ipsum dolor sit amet, consectetur adipiscing elit
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.

Label Lorem ipsum dolor sit amet, consectetur adipiscing elit Warning Lorem ipsum dolor sit amet, consectetur adipiscing elit
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

Top

Top Left

Top Right

Top Start

Top End

Left

Left

Left Top

Left Bottom

Right

Right

Right Top

Right Bottom

Bottom

Bottom

Bottom Left

Bottom Right

Bottom Start

Bottom End

Start

Start

Start Top

Start Bottom

End

End

End Top

End Bottom

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.

Label
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.

Label
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

Help
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

Top Top

Top Left Top Left

Top Right Top Right

Top Start Top Start

Top End Top End

Left

Left Left

Left Top Left Top

Left Bottom Left Bottom

Right

Right Right

Right Top Right Top

Right Bottom Right Bottom

Bottom

Bottom Bottom

Bottom Left Bottom Left

Bottom Right Bottom Right

Bottom Start Bottom Start

Bottom End Bottom End

Start

Start Start

Start Top Start Top

Start Bottom Start Bottom

End

End End

End Top End Top

End Bottom End Bottom

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

Tooltip now has 22 directions

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