diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 67a6d3ee7..09b09847d 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -106,7 +106,7 @@ const Tooltip = ({
   const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50)
 
   useEffect(() => {
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     if (!elementReference) {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -140,7 +140,7 @@ const Tooltip = ({
   }, [anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     computeToolTipPosition({
       place,
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 79e322341..8cc7f0cbf 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -123,7 +123,7 @@ const TooltipController = ({
       return () => {}
     }
 
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     if (!elementReference) {
       // eslint-disable-next-line @typescript-eslint/no-empty-function