• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Tooltip

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/tooltip@3.0.0-beta.4

Variants


Neutral
Verified

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
Verified

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-UIIcon-InfoSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoSmall" />
  </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-UIIcon-InfoSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Positive
Verified

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-UIIcon-SuccessSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessSmall" />
  </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-UIIcon-SuccessSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Negative
Verified

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-UIIcon-AlertSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertSmall" />
  </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-UIIcon-AlertSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertSmall" />
  </svg>
  <span class="spectrum-Tooltip-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span class="spectrum-Tooltip-tip"></span>
</span>

Directions
Verified

Tooltips can be top, bottom, left, or right.

Label

Label

Label

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

<br><br>

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

<br><br>

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

<br><br>

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

Success
Deprecated

Use positive instead.

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

Error
Deprecated

Use negative instead.

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

Help
Deprecated

An informative tooltip with a help icon.

Use info

Help
Show markup
<span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpSmall spectrum-Tooltip-typeIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpSmall" />
  </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.

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