gamv/ds2-core
1
0
Fork 0
Code Issues 13 Releases 10 Activity

support tooltip and tool-tip

Browse Source
This commit is contained in:
A McIlwraith
2026-06-17 08:23:04 -04:00
parent d6efdc59ff
commit 2d0cc46d2f
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/pg/patterns/core/tooltip/_tooltip.scss
View File

@@ -25,7 +25,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
*/ */
@mixin tooltip { @mixin tooltip {
tooltip { tooltip, tool-tip {
background: $tooltip-light-background; background: $tooltip-light-background;
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground; color: $tooltip-light-foreground;
@@ -150,9 +150,10 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
} }
} }
:has(> tool-tip) { :has(> tooltip), :has(> tool-tip) {
position: relative; position: relative;
&:is(:hover, :focus-visible, :active) > tool-tip { &:is(:hover, :focus-visible, :active) > tool-tip,
&:is(:hover, :focus-visible, :active) > tooltip {
display: block; display: block;
opacity: 1; opacity: 1;
transition-delay: 300ms; transition-delay: 300ms;
@@ -160,20 +161,20 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tool-tip { :has(> tooltip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tool-tip,
:has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tool-tip { :has(> tooltip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tool-tip,
:has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tool-tip { :has(> tooltip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tool-tip,
:has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tool-tip { :has(> tooltip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }