fix(overlays): put tooltip arrow css props on host

ing-bank · Jan 11, 2021 · a04ea59 · a04ea59
1 parent 9fef0cc
commit a04ea59
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/tidy-cheetahs-drop.md b/.changeset/tidy-cheetahs-drop.md
@@ -0,0 +1,5 @@
+---
+'@lion/overlays': patch
+---
+
+Put tooltip arrow width and height css props on host of ArrowMixin.
diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js
@@ -30,14 +30,17 @@ export const ArrowMixinImplementation = superclass =>
       return [
         superCtor.styles || [],
         css`
+          :host {
+            --tooltip-arrow-width: 12px;
+            --tooltip-arrow-height: 8px;
+          }
+
           .arrow svg {
             display: block;
           }
 
           .arrow {
             position: absolute;
-            --tooltip-arrow-width: 12px;
-            --tooltip-arrow-height: 8px;
             width: var(--tooltip-arrow-width);
             height: var(--tooltip-arrow-height);
           }