style: Fix tooltip styles (#3806)

Flagsmith · Apr 18, 2024 · f715645 · f715645
1 parent 40363dc
commit f715645
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/frontend/web/components/tags/TagContent.tsx b/frontend/web/components/tags/TagContent.tsx
@@ -36,18 +36,18 @@ const getTooltip = (tag: TTag | undefined) => {
   const tagColor = getTagColor(tag, false)
 
   if (isTruncated) {
-    return `<div className='flex-row align-items-center'>
-        <div
+    return `<div>
+        <span
           style='background-color: ${color(tagColor).fade(
             0.92,
           )}; border: 1px solid ${color(tagColor).fade(0.76)}; color: ${color(
       tagColor,
     ).darken(0.1)};'
-          class="chip me-1"
+          class="chip d-inline-block chip--xs me-1"
         >
           ${tag.label}
-        </div>
-        ${tooltip || ''}
+        </span>
+          ${tooltip || ''}
       </div>`
   }
   return tooltip

diff --git a/frontend/web/styles/project/_tooltips.scss b/frontend/web/styles/project/_tooltips.scss
@@ -20,6 +20,9 @@ $shadow-dark: 0 4px 4px 0 #00000029;
 
   background-color: white;
 
+  &:before {
+    z-index: -1 !important;
+  }
   &.place-top {
     &:after {
       box-shadow: $shadow;