From 2d0cc46d2f8b4dccac78cebe5865f77972a2beb8 Mon Sep 17 00:00:00 2001 From: A McIlwraith Date: Wed, 17 Jun 2026 08:23:04 -0400 Subject: [PATCH] support tooltip and tool-tip --- src/pg/patterns/core/tooltip/_tooltip.scss | 23 +++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/pg/patterns/core/tooltip/_tooltip.scss b/src/pg/patterns/core/tooltip/_tooltip.scss index 5f86a4c..a022dec 100644 --- a/src/pg/patterns/core/tooltip/_tooltip.scss +++ b/src/pg/patterns/core/tooltip/_tooltip.scss @@ -25,7 +25,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 */ @mixin tooltip { - tooltip { + tooltip, tool-tip { background: $tooltip-light-background; border-radius: $tooltip-border-radius; 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; - &:is(:hover, :focus-visible, :active) > tool-tip { + &:is(:hover, :focus-visible, :active) > tool-tip, + &:is(:hover, :focus-visible, :active) > tooltip { display: block; opacity: 1; 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) { - - :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; } - - :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); } - - :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; } - - :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); }