Tooltip - Spectrum CSS

Theme

Scale

Direction

Component status	Contribution
Last released	Unreleased
Current version	@spectrum-css/tooltip@3.0.3-alpha.1

Variants

Neutral
Verified

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

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
Verified

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
Verified

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
Verified

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

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.

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.

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

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-Help" />
  </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.

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>

Spectrum CSS

NeutralVerified

InformativeVerified

PositiveVerified

NegativeVerified

DirectionsVerified

SuccessDeprecated

ErrorDeprecated

HelpDeprecated

Show on hoverContribution

No results found

Neutral
Verified

Informative
Verified

Positive
Verified

Negative
Verified

Directions
Verified

Success
Deprecated

Error
Deprecated

Help
Deprecated

Show on hover
Contribution