fix: layout of tooltips (#2207)

* fix layout of tooltips * better transparency
kestra-io · Feb 11, 2025 · 3916c43 · 3916c43
1 parent c7fd77e
commit 3916c43
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -546,9 +546,13 @@ blockquote.blockquote {
         text-align: left !important;
         max-height: 20rem;
         overflow: auto;
-        background-color: var(--bs-body-color);
+        background-color: rgb(0,0,0,.6);
+        backdrop-filter: blur(4px);
         color: var(--kestra-io-token-color-white);
+        border: 1px solid var(--kestra-io-token-color-border-primary);
+        border-radius: 1em;
         max-width: 80ch;
+        padding: 1rem;
 
         p:not(li p) {
             margin-bottom: 0;
@@ -577,6 +581,9 @@ blockquote.blockquote {
             border-radius: 0px;
         }
     }
+    .tooltip-arrow {
+        --bs-tooltip-bg: var(--kestra-io-token-color-border-primary);
+    }
 }
 
 .bd-content .bd-markdown .code-block{

diff --git a/components/plugins/PluginCard.vue b/components/plugins/PluginCard.vue
@@ -6,7 +6,7 @@
                 <img :src="`/icons/${plugin.subGroup || plugin.group}.svg`" :alt="plugin.title">
             </div>
             <h6>
-                {{ pluginTitle(plugin.title) }}
+                {{ plugin.title }}
             </h6>
         </div>
     </NuxtLink>
@@ -24,13 +24,6 @@
         },
     });
 
-    const pluginTitle = (title) => {
-        const titleCase = title[0].toUpperCase() + title.slice(1);
-        return titleCase.length > 150 ? titleCase.substring(0, 150) + '...' : titleCase;
-    }
-
-
-
     const root = ref(null);
 
     onMounted(() => {
@@ -41,14 +34,14 @@
         });
 
         root.value.addEventListener('mouseenter', () => {
-          const tooltip = $bootstrap.Tooltip.getInstance(root.value);
-          if (tooltip) {
-            removeAllTooltips();
-            tooltip.show();
-            tooltip.tip.addEventListener('mouseleave', () => {
-              tooltip.hide();
-            });
-          }
+            const tooltip = $bootstrap.Tooltip.getInstance(root.value);
+            if (tooltip) {
+                removeAllTooltips();
+                tooltip.show();
+                tooltip.tip.addEventListener('mouseleave', () => {
+                tooltip.hide();
+                });
+            }
         });
       }
     });
@@ -89,6 +82,7 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            text-transform: capitalize;
             font-size: $font-size-md;
             font-weight: 400;
             margin-bottom: 0;

diff --git a/components/plugins/PluginsLists.vue b/components/plugins/PluginsLists.vue
@@ -118,7 +118,7 @@
     function creatingTooltipContainer (plugin, categoryItems, categoryName) {
       if (categoryItems && categoryItems.length > 0) {
         plugin.tooltipContent += `
-            <p>${categoryName}</p>
+            <p class="ks-plugin-card-${categoryName.toLowerCase()}">${categoryName}</p>
             <ul>
               ${generateCategoryList(plugin, categoryItems, categoryName)}
             </ul>