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);
 		}