@spectrum-css/tooltip/index.css

The Spectrum CSS tooltip component

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "./themes/spectrum-two.css";
@import "@spectrum-css/commons/overlay.css";

.spectrum-Tooltip {
	--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);

	/* override if additional spacing to source is required */
	--spectrum-tooltip-margin: 0px;

	--spectrum-tooltip-height: var(--spectrum-component-height-75);
	--spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
	--spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);

	--spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
	--spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);

	--spectrum-tooltip-font-size: var(--spectrum-font-size-75);
	--spectrum-tooltip-line-height: var(--spectrum-line-height-100);
	--spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
	--spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);

	/* horizontal spacing */
	--spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);

	/* vertical spacing */
	--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
	--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);

	/* icon spacing */
	--spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
	--spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
	--spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);

	/* colors */
	--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
	--spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
	--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);

	--spectrum-tooltip-content-color: var(--spectrum-white);

	/* tip */
	--spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
	--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);

	/* Width and height of square element used to render the tip triangle. */
	--spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);

	/* Percentage value of height divided by width, for calculating clip-path within a square tip. */
	--spectrum-tooltip-tip-height-percentage: 50%;

	/* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */
	--spectrum-tooltip-tip-antialiasing-inset: 0.5px;

	/* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
	--spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);

	/* neutral background changes per theme */
	--spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
}

@media (forced-colors: active) {
	.spectrum-Tooltip {
		border: 1px solid transparent;
	}

	.spectrum-Tooltip-tip {
		--highcontrast-tooltip-background-color-default: CanvasText;
		--highcontrast-tooltip-background-color-informative: CanvasText;
		--highcontrast-tooltip-background-color-positive: CanvasText;
		--highcontrast-tooltip-background-color-negative: CanvasText;

		forced-color-adjust: none;
	}
}

.spectrum-Tooltip {
	@extend %spectrum-overlay;

	position: relative;

	display: inline-flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;

	vertical-align: top;

	inline-size: auto;
	padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline));

	border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius));

	block-size: auto;
	min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height));
	max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size));

	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
	color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color));

	font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size));
	font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight));
	line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;

	cursor: default;
	user-select: none;

	/* CJK language support */
	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height));
	}

	p {
		margin: 0;
	}
}

/****** Variants ******/
.spectrum-Tooltip--info {
	background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}

.spectrum-Tooltip--positive {
	background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}

.spectrum-Tooltip--negative {
	background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}

.spectrum-Tooltip.is-open {
	@extend %spectrum-overlay--open;
}

/****** Tip Base Styles ******/
.spectrum-Tooltip-tip {
	position: absolute;

	block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
	inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));

	inset-block-start: 100%;
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	left: 50%;
	transform: translateX(-50%);

	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));

	/* Default: Pointing down ▽ */
	clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));

	.spectrum-Tooltip--info & {
		background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
	}

	.spectrum-Tooltip--positive & {
		background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
	}

	.spectrum-Tooltip--negative & {
		background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
	}

	/*** Tip Placement ***/
	/* tip is horizontal at bottom pointing down ▽ */
	.spectrum-Tooltip--top &,
	.spectrum-Tooltip--top-left &,
	.spectrum-Tooltip--top-right &,
	.spectrum-Tooltip--top-start &,
	.spectrum-Tooltip--top-end & {
		inset-block-start: 100%;
	}

	/* tip is horizontal at top pointing up △ */
	.spectrum-Tooltip--bottom &,
	.spectrum-Tooltip--bottom-left &,
	.spectrum-Tooltip--bottom-right &,
	.spectrum-Tooltip--bottom-start &,
	.spectrum-Tooltip--bottom-end & {
		clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
		inset-block: auto 100%;
	}

	/* tip is horizontal and at the edge */
	.spectrum-Tooltip--top-left &,
	.spectrum-Tooltip--bottom-left &,
	.spectrum-Tooltip--top-right &,
	.spectrum-Tooltip--bottom-right &,
	.spectrum-Tooltip--top-start &,
	.spectrum-Tooltip--bottom-start &,
	.spectrum-Tooltip--top-end &,
	.spectrum-Tooltip--bottom-end & {
		transform: none;
	}

	/* tip is horizontal at left △ ▽ */
	.spectrum-Tooltip--top-left &,
	.spectrum-Tooltip--bottom-left & {
		inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	}

	/* tip is horizontal at right △ ▽ */
	.spectrum-Tooltip--top-right &,
	.spectrum-Tooltip--bottom-right & {
		inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	}

	/* logical property - tip is horizontal at start △ ▽ */
	.spectrum-Tooltip--top-start &,
	.spectrum-Tooltip--bottom-start & {
		inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto;

		&:dir(rtl) {
			right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
			left: auto;
		}
	}

	/* logical property - tip is horizontal at end △ ▽ */
	.spectrum-Tooltip--top-end &,
	.spectrum-Tooltip--bottom-end & {
		inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));

		&:dir(rtl) {
			left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
			right: auto;
		}
	}

	/* tip right left start end resets ◁ ▷ */
	.spectrum-Tooltip--right &,
	.spectrum-Tooltip--right-bottom &,
	.spectrum-Tooltip--right-top &,
	.spectrum-Tooltip--left &,
	.spectrum-Tooltip--left-bottom &,
	.spectrum-Tooltip--left-top &,
	.spectrum-Tooltip--start &,
	.spectrum-Tooltip--start-top &,
	.spectrum-Tooltip--start-bottom &,
	.spectrum-Tooltip--end &,
	.spectrum-Tooltip--end-top &,
	.spectrum-Tooltip--end-bottom & {
		inset-block-start: 50%;
		transform: translateY(-50%);
	}

	/* tip is vertical and at edge */
	.spectrum-Tooltip--right-bottom &,
	.spectrum-Tooltip--right-top &,
	.spectrum-Tooltip--left-bottom &,
	.spectrum-Tooltip--left-top &,
	.spectrum-Tooltip--start-top &,
	.spectrum-Tooltip--start-bottom &,
	.spectrum-Tooltip--end-top &,
	.spectrum-Tooltip--end-bottom & {
		transform: none;
		inset-block-start: auto;
	}

	/* tip is vertical pointing ◁ left or start, for LTR. */
	.spectrum-Tooltip--right &,
	.spectrum-Tooltip--right-bottom &,
	.spectrum-Tooltip--right-top &,
	.spectrum-Tooltip--end &,
	.spectrum-Tooltip--end-top &,
	.spectrum-Tooltip--end-bottom & {
		clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
		inset-inline: auto 100%;
	}

	/* tip is vertical pointing ▷ right or end, for LTR. */
	.spectrum-Tooltip--left &,
	.spectrum-Tooltip--left-bottom &,
	.spectrum-Tooltip--left-top &,
	.spectrum-Tooltip--start &,
	.spectrum-Tooltip--start-top &,
	.spectrum-Tooltip--start-bottom & {
		clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
		inset-inline-start: 100%;
	}

	/* tip is vertical at top ◁ ▷ */
	.spectrum-Tooltip--right-top &,
	.spectrum-Tooltip--left-top &,
	.spectrum-Tooltip--start-top &,
	.spectrum-Tooltip--end-top & {
		inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	}

	/* tip is vertical at bottom ◁ ▷ */
	.spectrum-Tooltip--right-bottom &,
	.spectrum-Tooltip--left-bottom &,
	.spectrum-Tooltip--start-bottom &,
	.spectrum-Tooltip--end-bottom & {
		inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	}

	/* tip logical property - Start pointing tip reversed to point toward end ▷ for RTL. */
	.spectrum-Tooltip--left &,
	.spectrum-Tooltip--left-bottom &,
	.spectrum-Tooltip--left-top &,
	.spectrum-Tooltip--end &,
	.spectrum-Tooltip--end-top &,
	.spectrum-Tooltip--end-bottom & {
		&:dir(rtl) {
			clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
			right: auto;
			left: 100%;
		}
	}

	/* tip logical property - End pointing tip reversed to point toward start ◁ for RTL. */
	.spectrum-Tooltip--right &,
	.spectrum-Tooltip--right-bottom &,
	.spectrum-Tooltip--right-top &,
	.spectrum-Tooltip--start &,
	.spectrum-Tooltip--start-top &,
	.spectrum-Tooltip--start-bottom & {
		&:dir(rtl) {
			clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
			left: auto;
			right: 100%;
		}
	}
}

/****** Icon ******/
.spectrum-Tooltip-typeIcon {
	/* subtract tooltip padding from icon start margin */
	margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)));
	margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end));
	margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start));
	inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width));
	block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height));
	align-self: flex-start;
	flex-shrink: 0;
}

/****** Label ******/
.spectrum-Tooltip-label {
	/* Make sure line height is correct to prevent problems in Windows */
	line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
	margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start));
	margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end));
}

/****** Tooltip Placement and Animation Direction ******/
/* position is top of source - default */
.spectrum-Tooltip,
.spectrum-Tooltip--top,
.spectrum-Tooltip--top-left,
.spectrum-Tooltip--top-right,
.spectrum-Tooltip--top-start,
.spectrum-Tooltip--top-end {
	margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* tooltip animates upward ⬆ */
	&.is-open {
		transform: translateY(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
	}
}

/* tooltip position is at bottom of source */
.spectrum-Tooltip--bottom,
.spectrum-Tooltip--bottom-left,
.spectrum-Tooltip--bottom-right,
.spectrum-Tooltip--bottom-start,
.spectrum-Tooltip--bottom-end {
	margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* Tooltip animates downward ⬇ */
	&.is-open {
		transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
	}
}

/* tooltip position is right of source */
.spectrum-Tooltip--right,
.spectrum-Tooltip--right-bottom,
.spectrum-Tooltip--right-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* Tooltip animates to right ⮕ */
	&.is-open {
		transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
	}
}

/* tooltip position is left of source */
.spectrum-Tooltip--left,
.spectrum-Tooltip--left-bottom,
.spectrum-Tooltip--left-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* Tooltip animates to left ⬅ */
	&.is-open {
		transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
	}
}

/* logical property - tooltip is horizontally at start */
.spectrum-Tooltip--start,
.spectrum-Tooltip--start-top,
.spectrum-Tooltip--start-bottom {
	margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* LTR read, tooltip animates towards left ⬅ */
	&.is-open {
		transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
	}

	/* RTL read, tooltip animates towards right ⮕ */
	&:dir(rtl) {
		&.is-open {
			transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
		}
	}
}

/* logical property - tooltip is horizontally at end */
.spectrum-Tooltip--end,
.spectrum-Tooltip--end-top,
.spectrum-Tooltip--end-bottom {
	margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));

	/* LTR read, tooltip animates towards right ⮕ */
	&.is-open {
		transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
	}

	/* RTL read, tooltip animates towards left ⬅ */
	&:dir(rtl) {
		&.is-open {
			transform: translateX(calc(-1 * var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))));
		}
	}
}

/*** CSS Hover Animation ***/
.u-tooltip-showOnHover {
	display: inline-block;
	position: relative;

	.spectrum-Tooltip {
		position: absolute;
		white-space: nowrap;

		/* Required for animations to work, !important for diff scaling to work */
		visibility: visible !important;
		transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out;
	}

	.spectrum-Tooltip-label {
		/* Don't try to wrap as the mechanism used for this helper does not support wrapping */
		max-inline-size: none;
	}

	&:hover .spectrum-Tooltip,
	&:focus .spectrum-Tooltip,
	&.is-focused .spectrum-Tooltip,
	*:focus .spectrum-Tooltip {
		opacity: 1;
	}

	.spectrum-Tooltip--top,
	.spectrum-Tooltip--top-left,
	.spectrum-Tooltip--top-right,
	.spectrum-Tooltip--top-start,
	.spectrum-Tooltip--top-end,
	.spectrum-Tooltip--bottom,
	.spectrum-Tooltip--bottom-left,
	.spectrum-Tooltip--bottom-right,
	.spectrum-Tooltip--bottom-start,
	.spectrum-Tooltip--bottom-end {
		/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
		left: 50%;
		transform: translate(-50%, 0);
	}

	.spectrum-Tooltip--top,
	.spectrum-Tooltip--top-left,
	.spectrum-Tooltip--top-right,
	.spectrum-Tooltip--top-start,
	.spectrum-Tooltip--top-end {
		inset-block-end: 100%;
	}

	.spectrum-Tooltip--bottom,
	.spectrum-Tooltip--bottom-left,
	.spectrum-Tooltip--bottom-right,
	.spectrum-Tooltip--bottom-start,
	.spectrum-Tooltip--bottom-end {
		inset-block-start: 100%;
	}

	.spectrum-Tooltip--left,
	.spectrum-Tooltip--left-bottom,
	.spectrum-Tooltip--left-top,
	.spectrum-Tooltip--right,
	.spectrum-Tooltip--right-bottom,
	.spectrum-Tooltip--right-top,
	.spectrum-Tooltip--start,
	.spectrum-Tooltip--start-top,
	.spectrum-Tooltip--start-bottom,
	.spectrum-Tooltip--end,
	.spectrum-Tooltip--end-top,
	.spectrum-Tooltip--end-bottom {
		inset-block-start: 50%;
		transform: translate(0, -50%);
	}

	.spectrum-Tooltip--left,
	.spectrum-Tooltip--left-bottom,
	.spectrum-Tooltip--left-top,
	.spectrum-Tooltip--start,
	.spectrum-Tooltip--start-top,
	.spectrum-Tooltip--start-bottom {
		/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
		right: 100%;
	}

	/* RTL */
	&:dir(rtl) {
		.spectrum-Tooltip--start,
		.spectrum-Tooltip--start-top,
		.spectrum-Tooltip--start-bottom {
			left: 100%;
			right: auto;
		}
	}

	.spectrum-Tooltip--right,
	.spectrum-Tooltip--right-top,
	.spectrum-Tooltip--right-bottom,
	.spectrum-Tooltip--end,
	.spectrum-Tooltip--end-top,
	.spectrum-Tooltip--end-bottom {
		/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
		left: 100%;
	}

	/* RTL */
	&:dir(rtl) {
		.spectrum-Tooltip--end,
		.spectrum-Tooltip--end-top,
		.spectrum-Tooltip--end-bottom {
			left: auto;
			right: 100%;
		}
	}

	&:hover,
	&:focus,
	&.is-focused,
	*:focus {
		.spectrum-Tooltip--top,
		.spectrum-Tooltip--top-left,
		.spectrum-Tooltip--top-right,
		.spectrum-Tooltip--top-start,
		.spectrum-Tooltip--top-end {
			transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
		}
	}

	&:hover,
	&:focus,
	&.is-focused,
	*:focus {
		.spectrum-Tooltip--bottom,
		.spectrum-Tooltip--bottom-left,
		.spectrum-Tooltip--bottom-right,
		.spectrum-Tooltip--bottom-start,
		.spectrum-Tooltip--bottom-end {
			transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
		}
	}

	&:hover,
	&:focus,
	&.is-focused,
	*:focus {
		.spectrum-Tooltip--left,
		.spectrum-Tooltip--left-bottom,
		.spectrum-Tooltip--left-top,
		.spectrum-Tooltip--start,
		.spectrum-Tooltip--start-top,
		.spectrum-Tooltip--start-bottom {
			transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
		}
	}

	/* RTL */
	&:dir(rtl) {
		&:hover,
		&:focus,
		&.is-focused,
		*:focus {
			.spectrum-Tooltip--start,
			.spectrum-Tooltip--start-top,
			.spectrum-Tooltip--start-bottom {
				transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
			}
		}
	}

	&:hover,
	&:focus,
	&.is-focused,
	*:focus {
		.spectrum-Tooltip--right,
		.spectrum-Tooltip--right-top,
		.spectrum-Tooltip--right-bottom,
		.spectrum-Tooltip--end,
		.spectrum-Tooltip--end-top,
		.spectrum-Tooltip--end-bottom {
			transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
		}
	}

	/* RTL */
	&:dir(rtl) {
		&:hover,
		&:focus,
		&.is-focused,
		*:focus {
			.spectrum-Tooltip--end,
			.spectrum-Tooltip--end-top,
			.spectrum-Tooltip--end-bottom {
				transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
			}
		}
	}
}