diff --git a/packages/react/src/components/Popover.tsx b/packages/react/src/components/Popover.tsx
index 7bb7cf10..51e9880d 100644
--- a/packages/react/src/components/Popover.tsx
+++ b/packages/react/src/components/Popover.tsx
@@ -268,7 +268,7 @@ function PopoverPopup({ id, className, children }: PopoverPopupProps): JSX.Eleme
   const triggerElement = triggerRef.current;
 
   const uniqueId = useId();
-  const popupId = id ?? uniqueId;
+  const popupId = id ?? uniqueId.replace(/^:([^:]+):$/, '«$1»');
 
   useEffect(() => {
     if (!popupRef.current || !triggerRef.current) return;
diff --git a/packages/react/src/components/Tooltip.tsx b/packages/react/src/components/Tooltip.tsx
index 84cb68b5..4cd9181c 100644
--- a/packages/react/src/components/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip.tsx
@@ -309,7 +309,7 @@ function TooltipPopup({ id, className = '', children }: TooltipPopupProps): JSX.
   const triggerElement = triggerRef.current;
 
   const uniqueId = useId();
-  const popupId = id ?? uniqueId;
+  const popupId = id ?? uniqueId.replace(/^:([^:]+):$/, '«$1»');
 
   useEffect(() => {
     if (!popupRef.current || !triggerRef.current) return;
diff --git a/packages/react/src/types.d.ts b/packages/react/src/types.d.ts
index 3d673e2e..4166d43b 100644
--- a/packages/react/src/types.d.ts
+++ b/packages/react/src/types.d.ts
@@ -2,3 +2,12 @@ declare module '*.module.css' {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare global {
+  declare module 'react' {
+    interface Attributes {
+      popover?: 'auto' | 'manual' | string;
+      commandfor?: string;
+    }
+  }
+}