From 0e965a4978941fc482b3230f03af8c808aa19fb4 Mon Sep 17 00:00:00 2001 From: A McIlwraith Date: Mon, 25 May 2026 08:09:21 -0400 Subject: [PATCH] =?UTF-8?q?[tool-tip]=20Update=20tool=20tip=20SCSS=20to=20?= =?UTF-8?q?use=20tool-tip=20tag=20rather=20than=20[role=3D=E2=80=98tooltip?= =?UTF-8?q?=E2=80=99].?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pg/patterns/core/tooltip/_tooltip.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pg/patterns/core/tooltip/_tooltip.scss b/src/pg/patterns/core/tooltip/_tooltip.scss index 5321807..5d574e1 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 { - [role="tooltip"] { + tool-tip { background: $tooltip-light-background; border-radius: $tooltip-border-radius; 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; - &:is(:hover, :focus-visible, :active) > [role="tooltip"] { + &:is(:hover, :focus-visible, :active) > tool-tip { display: block; opacity: 1; 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) { - :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; } - :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); } - :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; } - :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); }