diff --git a/components/dash-core-components/src/components/Tooltip.tsx b/components/dash-core-components/src/components/Tooltip.tsx
index 16a5c95504..e126e73dbd 100644
--- a/components/dash-core-components/src/components/Tooltip.tsx
+++ b/components/dash-core-components/src/components/Tooltip.tsx
@@ -31,6 +31,7 @@ const Tooltip = ({
         height: `${position?.y1 - position?.y0}px`,
         display: `${show_tooltip ? 'inline-block' : 'none'}`,
         pointerEvents: `${targetable ? 'auto' : 'none'}`,
+        '--Dash-Tooltip-PointerEvents': targetable ? 'auto' : 'none',
         '--Dash-Tooltip-Border-Color': border_color,
         '--Dash-Tooltip-Background-Color': background_color,
         '--Dash-Tooltip-ZIndex': zindex,
diff --git a/components/dash-core-components/src/components/css/tooltip.css b/components/dash-core-components/src/components/css/tooltip.css
index 2549b442a5..a719da2731 100644
--- a/components/dash-core-components/src/components/css/tooltip.css
+++ b/components/dash-core-components/src/components/css/tooltip.css
@@ -32,7 +32,7 @@
     background: var(--Dash-Tooltip-Background-Color);
     white-space: nowrap;
     z-index: var(--Dash-Tooltip-ZIndex);
-    pointer-events: none;
+    pointer-events: var(--Dash-Tooltip-PointerEvents);
     box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
         0px 10px 20px -15px var(--Dash-Shading-Weak);
 }