fix: tooltip arrow and overlay zIndex (#50)

* fix: tooltip arrow and overlay zIndex closes #49 * fix: not widely supported text-wrap
RBND-studio · Mar 8, 2024 · 866e6c6 · 866e6c6
1 parent 36f3a3c
commit 866e6c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/workspaces/js/css/template.css b/workspaces/js/css/template.css
@@ -64,7 +64,7 @@
   font-size: var(--flows-base-font-size);
   line-height: var(--flows-base-line-height);
   font-weight: 600;
-  text-wrap: nowrap;
+  white-space: nowrap;
   text-decoration: none;
 }
 .flows-primary-btn {
@@ -119,7 +119,6 @@
   border-radius: var(--flows-borderRadius-medium);
   position: absolute;
   padding: var(--flows-tooltip-padding);
-  box-shadow: var(--flows-shadow);
 
   font-family: var(--flows-font-family);
   font-size: var(--flows-base-font-size);
@@ -129,8 +128,18 @@
   min-width: var(--flows-tooltip-minWidth);
   max-width: min(var(--flows-tooltip-maxWidth), calc(100% - 16px));
 }
+.flows-tooltip:before {
+  box-shadow: var(--flows-shadow);
+  border-radius: var(--flows-borderRadius-medium);
+  content: "";
+  position: absolute;
+  inset: calc(var(--flows-borderWidth) * -1);
+  z-index: -1;
+  pointer-events: none;
+}
 .flows-tooltip-overlay {
   position: fixed;
+  z-index: -1;
   pointer-events: none;
 }
 .flows-tooltip-overlay:after {

diff --git a/workspaces/js/css/vars.css b/workspaces/js/css/vars.css
@@ -10,7 +10,8 @@
   --flows-fg-default: #222222;
   --flows-fg-onPrimary: #ffffff;
 
-  --flows-border: 1px solid #cccccc;
+  --flows-borderWidth: 1px;
+  --flows-border: var(--flows-borderWidth) solid #cccccc;
 
   --flows-shadow: 0px 8px 12px rgba(28, 26, 39, 0.08), 0px 6px 8px rgba(28, 26, 39, 0.12),
     0px 0px 1px rgba(28, 26, 39, 0.16);