@spectrum-css/tooltip
Version:
The Spectrum CSS tooltip component
635 lines (633 loc) • 34.8 kB
CSS
/*!
* 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.
*/
.spectrum-Tooltip {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition:
transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
}
.spectrum-Tooltip.is-open {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
}
.spectrum-Tooltip {
--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
--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);
--spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
--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);
--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);
--spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
--spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
--spectrum-tooltip-tip-height-percentage: 50%;
--spectrum-tooltip-tip-antialiasing-inset: 0.5px;
--spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
--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 {
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;
-webkit-user-select: none;
user-select: none;
}
.spectrum-Tooltip:lang(ja),
.spectrum-Tooltip:lang(ko),
.spectrum-Tooltip:lang(zh) {
line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height));
}
.spectrum-Tooltip p {
margin: 0;
}
.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-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)));
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 .spectrum-Tooltip-tip {
background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}
.spectrum-Tooltip--positive .spectrum-Tooltip-tip {
background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}
.spectrum-Tooltip--negative .spectrum-Tooltip-tip {
background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}
.spectrum-Tooltip--top .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
inset-block-start: 100%;
}
.spectrum-Tooltip--bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip {
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%;
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
transform: none;
}
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip {
inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip {
inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto;
}
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
left: auto;
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip {
inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip {
left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
right: auto;
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
inset-block-start: 50%;
transform: translateY(-50%);
}
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
transform: none;
inset-block-start: auto;
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip {
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%;
}
.spectrum-Tooltip--left .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
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%;
}
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip {
inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--end .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip {
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%;
}
.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--right .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
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%;
}
.spectrum-Tooltip-typeIcon {
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;
}
.spectrum-Tooltip-label {
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));
}
.spectrum-Tooltip,
.spectrum-Tooltip--top,
.spectrum-Tooltip--top-end,
.spectrum-Tooltip--top-left,
.spectrum-Tooltip--top-right,
.spectrum-Tooltip--top-start {
margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--top-end.is-open,
.spectrum-Tooltip--top-left.is-open,
.spectrum-Tooltip--top-right.is-open,
.spectrum-Tooltip--top-start.is-open,
.spectrum-Tooltip--top.is-open,
.spectrum-Tooltip.is-open {
transform: translateY(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--bottom,
.spectrum-Tooltip--bottom-end,
.spectrum-Tooltip--bottom-left,
.spectrum-Tooltip--bottom-right,
.spectrum-Tooltip--bottom-start {
margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--bottom-end.is-open,
.spectrum-Tooltip--bottom-left.is-open,
.spectrum-Tooltip--bottom-right.is-open,
.spectrum-Tooltip--bottom-start.is-open,
.spectrum-Tooltip--bottom.is-open {
transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.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)));
}
.spectrum-Tooltip--right-bottom.is-open,
.spectrum-Tooltip--right-top.is-open,
.spectrum-Tooltip--right.is-open {
transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.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)));
}
.spectrum-Tooltip--left-bottom.is-open,
.spectrum-Tooltip--left-top.is-open,
.spectrum-Tooltip--left.is-open {
transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--start,
.spectrum-Tooltip--start-bottom,
.spectrum-Tooltip--start-top {
margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--start-bottom.is-open,
.spectrum-Tooltip--start-top.is-open,
.spectrum-Tooltip--start.is-open {
transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--start-bottom.is-open:dir(rtl),
.spectrum-Tooltip--start-top.is-open:dir(rtl),
.spectrum-Tooltip--start.is-open:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--start-bottom.is-open,
[dir="rtl"] .spectrum-Tooltip--start-top.is-open,
[dir="rtl"] .spectrum-Tooltip--start.is-open {
transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--end,
.spectrum-Tooltip--end-bottom,
.spectrum-Tooltip--end-top {
margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--end-bottom.is-open,
.spectrum-Tooltip--end-top.is-open,
.spectrum-Tooltip--end.is-open {
transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--end-bottom.is-open:dir(rtl),
.spectrum-Tooltip--end-top.is-open:dir(rtl),
.spectrum-Tooltip--end.is-open:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--end-bottom.is-open,
[dir="rtl"] .spectrum-Tooltip--end-top.is-open,
[dir="rtl"] .spectrum-Tooltip--end.is-open {
transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.u-tooltip-showOnHover {
display: inline-block;
position: relative;
}
.u-tooltip-showOnHover .spectrum-Tooltip {
position: absolute;
white-space: nowrap;
visibility: visible ;
transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out;
}
.u-tooltip-showOnHover .spectrum-Tooltip-label {
max-inline-size: none;
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip,
.u-tooltip-showOnHover:focus .spectrum-Tooltip {
opacity: 1;
}
.u-tooltip-showOnHover .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover .spectrum-Tooltip--top,
.u-tooltip-showOnHover .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover .spectrum-Tooltip--top-start {
/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
left: 50%;
transform: translate(-50%);
}
.u-tooltip-showOnHover .spectrum-Tooltip--top,
.u-tooltip-showOnHover .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover .spectrum-Tooltip--top-start {
inset-block-end: 100%;
}
.u-tooltip-showOnHover .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-start {
inset-block-start: 100%;
}
.u-tooltip-showOnHover .spectrum-Tooltip--end,
.u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover .spectrum-Tooltip--left,
.u-tooltip-showOnHover .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover .spectrum-Tooltip--right,
.u-tooltip-showOnHover .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover .spectrum-Tooltip--start,
.u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--start-top {
inset-block-start: 50%;
transform: translateY(-50%);
}
.u-tooltip-showOnHover .spectrum-Tooltip--left,
.u-tooltip-showOnHover .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover .spectrum-Tooltip--start,
.u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--start-top {
/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
right: 100%;
}
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top {
left: 100%;
right: auto;
}
.u-tooltip-showOnHover .spectrum-Tooltip--end,
.u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover .spectrum-Tooltip--right,
.u-tooltip-showOnHover .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--right-top {
/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
left: 100%;
}
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top {
left: auto;
right: 100%;
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-start {
transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-start {
transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top {
transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right-top,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top {
transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
}
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top {
transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
@media (hover: hover) {
.u-tooltip-showOnHover:hover .spectrum-Tooltip {
opacity: 1;
}
.u-tooltip-showOnHover:hover .spectrum-Tooltip--top,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start {
transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-start {
transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.u-tooltip-showOnHover:hover .spectrum-Tooltip--left,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--start,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top {
transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--right,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover:hover .spectrum-Tooltip--right-top,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top {
transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
}
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top {
transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
}