Tooltip

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/tooltip@2.0.0

Variants#


Neutral#
Verified

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

Informative#
Verified

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

Positive#
Verified

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

Negative#
Verified

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

Directions#
Verified

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

Label

Label

Label

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

Success#
Deprecated

Use positive instead.

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

Error#
Deprecated

Use negative instead.

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

Help#
Deprecated

An informative tooltip with a help icon.

Use info

Help
<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 markup

Show on hover#
Unverified

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
<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>
Show markup