- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Tooltip
Component status | Contribution |
---|---|
Current version | @spectrum-css/tooltip@6.1.4 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/tooltip@7.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Variants
NeutralContribution
<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>
InformativeContribution
Spectrum for Adobe Express uses a different icon. Use the SX_Info_14_S.svg
icon in the Express workflow icon set.
<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>
PositiveContribution
Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_14_S.svg
icon in the Express workflow icon set.
<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>
NegativeContribution
Spectrum for Adobe Express uses a different icon. Use the SX_Alert_14_S.svg
icon in the Express workflow icon set.
<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>
DirectionsContribution
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
TopTop Left
Top Right
Top Start
Top End
Left
LeftLeft Top
Left Bottom
Right
RightRight Top
Right Bottom
Bottom
BottomBottom Left
Bottom Right
Bottom Start
Bottom End
Start
StartStart Top
Start Bottom
End
EndEnd Top
End Bottom
<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>
SuccessContribution
Use positive
instead.
<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>
ErrorContribution
Use negative
instead.
<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>
HelpContribution
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
<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 hoverContribution
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 TopTop Left Top Left
Top Right Top Right
Top Start Top Start
Top End Top End
Left
Left LeftLeft Top Left Top
Left Bottom Left Bottom
Right
Right RightRight Top Right Top
Right Bottom Right Bottom
Bottom
Bottom BottomBottom Left Bottom Left
Bottom Right Bottom Right
Bottom Start Bottom Start
Bottom End Bottom End
Start
Start StartStart Top Start Top
Start Bottom Start Bottom
End
End EndEnd Top End Top
End Bottom End Bottom
<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