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

[tool-tip] Update tool tip SCSS to use tool-tip tag rather than [role=‘tooltip’].

Browse Source
This commit is contained in:
A McIlwraith
2026-05-25 08:09:21 -04:00
parent 76aebac4d1
commit 0e965a4978
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
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 {
[role="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,9 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
} }
} }
:has(> [role="tooltip"]) { :has(> tool-tip) {
position: relative; position: relative;
&:is(:hover, :focus-visible, :active) > [role="tooltip"] { &:is(:hover, :focus-visible, :active) > tool-tip {
display: block; display: block;
opacity: 1; opacity: 1;
transition-delay: 300ms; transition-delay: 300ms;
@@ -161,19 +161,19 @@ $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(> [role="tooltip"]:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) [role="tooltip"] { :has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tool-tip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> [role="tooltip"]:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) [role="tooltip"] { :has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tool-tip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> [role="tooltip"]:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) [role="tooltip"] { :has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tool-tip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> [role="tooltip"]:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) [role="tooltip"] { :has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tool-tip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }