Make targetable tooltips interactive

Author: AnnMarieW

components/dash-core-components/src/components/Tooltip.tsx

@@ -30,7 +30,7 @@ const Tooltip = ({
         width: `${position?.x1 - position?.x0}px`,
         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,

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