- tooltip: make tooltip delivery consistent across all browsers (#5056) (d01d5cd)
Note: Version bump only for package @spectrum-web-components/tooltip
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
- add an optional chromatic vrt action (7d2f840)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- overlay: ensure hint Overlays within shadow roots open as expected (#4443) (7dd64b9)
- overlay: ensure hint Overlays within shadow roots open as expected (#4443) (7dd64b9)
- overlay: ensure hint Overlays within shadow roots open as expected (#4443) (7dd64b9)
- tooltip: fix infinite loop in self-managed tooltips (#4269) (b66ee49)
- tooltip: fix infinite loop in self-managed tooltips (#4269) (b66ee49)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- overlay: move closed overlays to "display: none" (fc0278b)
- picker: force close slotted Tooltip elements with disabled when Menu openes (82c8f12)
- tooltip: surface "delayed" and "disabled" functionality (#3882) (ae9fcd2)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- progress-circle,toast,tooltip: ensure complete dependency graph (#3701) (a5dfada)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- address margin effected positioning (38c8cf2)
- tooltip: leverage Overlay v2 (346edac)
- make lots of things lazy (b8fa3ad)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- allow ActiveOverlay to manage open state (a7c4cff)
- correct @element jsDoc listing across library (c97a632)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- include default export in the "exports" fields (f32407d)
- include the "types" entry in package.json files (b432f59)
- overlay: add overlay lifecycle methods to stack management (9361527)
- overlay: allow overlay-trigger to declaratively open overlay content (194a44e)
- position tip shapes for bi-directional delivery (35654de)
- special case the possibility of leaving an overlay trigger by entering its overlay content (c32a075)
- stop merging selectors in a way that alters the cascade (369388f)
- tooltip: correct arrow orientation, remove popper-arrow-rotate (fcd6ea2)
- tooltip: ensure delayed and self-managed tooltips do not disrupt the page layout (0f43b25)
- tooltip: manage describedby attributes non-destructively (8443136)
- update consumption of Spectrum CSS for latest version (ed2305b)
- update latest Spectrum CSS beta releases (d8d3acc)
- update side effect listings (8160d3a)
- update to latest spectrum-css packages (a5ca19f)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- use the "browsers" listing in postcss-preset-env (4eaf6a2)
- action-button: add action button pattern (03ac00a)
- adopt DNA@7 base Spectrum CSS (e08cafd)
- icons-workflow: vend fully registered icon components (941f3a4)
- include all Dev Mode files in side effects (f70817c)
- leverage "exports" field in package.json (321abd7)
- rework overlays to use popper (e17d1bb)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- tooltip: initial release (c1331c9)
- tooltip: update spectrum css input (a946b1c)
- update to Spectrum CSS v3.0.0 (e8b3d8f)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use latest exports specification (a7ecf4b)
- use "sideEffects" listing in package.json (7271614)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- Revert "chore: release new versions" (a6d655d)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- special case the possibility of leaving an overlay trigger by entering its overlay content (c32a075)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- include all Dev Mode files in side effects (f70817c)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- update consumption of Spectrum CSS for latest version (ed2305b)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- tooltip: manage describedby attributes non-destructively (8443136)
Note: Version bump only for package @spectrum-web-components/tooltip
- tooltip: ensure delayed and self-managed tooltips do not disrupt the page layout (0f43b25)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- adopt DNA@7 base Spectrum CSS (e08cafd)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- correct @element jsDoc listing across library (c97a632)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- overlay: add overlay lifecycle methods to stack management (9361527)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- overlay: allow overlay-trigger to declaratively open overlay content (194a44e)
Note: Version bump only for package @spectrum-web-components/tooltip
- use latest exports specification (a7ecf4b)
- update to latest spectrum-css packages (a5ca19f)
Note: Version bump only for package @spectrum-web-components/tooltip
- position tip shapes for bi-directional delivery (35654de)
- tooltip: correct arrow orientation, remove popper-arrow-rotate (fcd6ea2)
- allow ActiveOverlay to manage open state (a7c4cff)
- include the "types" entry in package.json files (b432f59)
- stop merging selectors in a way that alters the cascade (369388f)
- update latest Spectrum CSS beta releases (d8d3acc)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- use the "browsers" listing in postcss-preset-env (4eaf6a2)
- action-button: add action button pattern (03ac00a)
- icons-workflow: vend fully registered icon components (941f3a4)
- tooltip: update spectrum css input (a946b1c)
- include the "types" entry in package.json files (b432f59)
- stop merging selectors in a way that alters the cascade (369388f)
- update latest Spectrum CSS beta releases (d8d3acc)
- use icons without "size" values (3fc7c91)
- use latest @spectrum-css/* versions (c35eb86)
- action-button: add action button pattern (03ac00a)
- icons-workflow: vend fully registered icon components (941f3a4)
- tooltip: update spectrum css input (a946b1c)
Note: Version bump only for package @spectrum-web-components/tooltip
- include default export in the "exports" fields (f32407d)
- update side effect listings (8160d3a)
Note: Version bump only for package @spectrum-web-components/tooltip
- update to Spectrum CSS v3.0.0 (e8b3d8f)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- leverage "exports" field in package.json (321abd7)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- use "sideEffects" listing in package.json (7271614)
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
Note: Version bump only for package @spectrum-web-components/tooltip
- rework overlays to use popper (e17d1bb)
Note: Version bump only for package @spectrum-web-components/tooltip
- include "type" in package.json, generate custom-elements.json (1a8d716)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- tooltip: initial release (c1331c9)
sp-tooltip
allow users to get contextual help or information about specific components when hovering or focusing on them.

yarn add @spectrum-web-components/tooltip
Import the side effectful registration of <sp-tooltip>
via:
import '@spectrum-web-components/tooltip/sp-tooltip.js';
When looking to leverage the Tooltip
base class as a type and/or for extension purposes, do so via:
import { Tooltip } from '@spectrum-web-components/tooltip';
Tooltips can be top, bottom, left, or right.
<sp-tooltip open placement="top">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="bottom">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="left">Label</sp-tooltip>
<br />
<br />
<sp-tooltip open placement="right">Label</sp-tooltip>
By default, Tooltip provides styling without behavior. You must combine it with an Overlay Trigger in order to manage its overlay behavior.
You can use the tooltip as the descendant of an interactive element, such as Action Button, by applying the self-managed
attribute which automatically binds the Tooltip to its first interactive ancestor element's focus/hover interactions:
<sp-action-button>
Trigger
<sp-tooltip self-managed>Content</sp-tooltip>
</sp-action-button>
This is especially useful when inserting an intermediate <overlay-trigger>
would interfere with parent/child relationships, such as between <sp-action-group>
and <sp-action-button>
.
Note that an interactive element is an element that can receive focus during tab navigation, such as sp-action-button
, sp-action-menu
, sp-field-label
etc.
Given that tooltip is not focusable by itself, it would not show up during tab navigation. Thus a tooltip would not be accessible if used with a non-interactive element, such as <sp-icon-*>
.
The correct way to make it accessible would be to wrap it under an interactive element, such as sp-action-button
:
<sp-action-button size="s">
<sp-icon-info slot="icon"></sp-icon-info>
<sp-tooltip self-managed placement="right">
Display something here
</sp-tooltip>
</sp-action-button>
This is the informative or info variant of Tooltip
<sp-tooltip open placement="top" variant="info">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
<sp-icon-info slot="icon" size="s"></sp-icon-info>
Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="info">
<sp-icon-info slot="icon" size="s"></sp-icon-info>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
This is the postive (a.k.a.) success variant of Tooltip
<sp-tooltip open placement="top" variant="positive">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
<sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="positive">
<sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
This is the negative a.k.a. error variant of Tooltip
<sp-tooltip open placement="top" variant="negative">Label</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
<sp-icon-alert slot="icon" size="s"></sp-icon-alert>
Label
</sp-tooltip>
<sp-tooltip open placement="top" variant="negative">
<sp-icon-alert slot="icon" size="s"></sp-icon-alert>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</sp-tooltip>