Tooltip (#1429)

levkk · web-flow · commit 3dd9e7fa1bb7 · 2024-04-29T15:27:31.000-07:00
diff --git a/pgml-dashboard/src/components/chatbot/chatbot_controller.js b/pgml-dashboard/src/components/chatbot/chatbot_controller.js
@@ -400,10 +400,13 @@ export default class extends Controller {
 
   showChatbotAlert(level, message) {
     const toastElement = createToast(message, level);
-    showToast(toastElement, {
-      autohide: true,
-      delay: 7000,
-    });
+
+    if (toastElement) {
+      showToast(toastElement, {
+        autohide: true,
+        delay: 7000,
+      });
+    }
   }
 
   hideExampleQuestions() {
diff --git a/pgml-dashboard/src/components/inputs/labels/mod.rs b/pgml-dashboard/src/components/inputs/labels/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/inputs/labels/with_tooltip
+pub mod with_tooltip;
+pub use with_tooltip::WithTooltip;
diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/mod.rs b/pgml-dashboard/src/components/inputs/labels/with_tooltip/mod.rs
@@ -0,0 +1,44 @@
+use pgml_components::{component, Component};
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/labels/with_tooltip/template.html")]
+pub struct WithTooltip {
+    component: Component,
+    tooltip: String,
+    icon: String,
+    html: bool,
+}
+
+impl WithTooltip {
+    pub fn new(component: Component) -> WithTooltip {
+        WithTooltip {
+            component,
+            tooltip: String::new(),
+            icon: "info".to_string(),
+            html: false,
+        }
+    }
+
+    pub fn tooltip(mut self, tooltip: impl ToString) -> Self {
+        self.tooltip = tooltip.to_string();
+        self
+    }
+
+    pub fn tooltip_text(self, tooltip: impl ToString) -> Self {
+        self.tooltip(tooltip)
+    }
+
+    pub fn tooltip_html(mut self, tooltip: impl ToString) -> Self {
+        self.tooltip = tooltip.to_string();
+        self.html = true;
+        self
+    }
+
+    pub fn icon(mut self, icon: impl ToString) -> Self {
+        self.icon = icon.to_string();
+        self
+    }
+}
+
+component!(WithTooltip);
diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/template.html b/pgml-dashboard/src/components/inputs/labels/with_tooltip/template.html
@@ -0,0 +1,15 @@
+<span
+  data-controller="inputs-labels-with-tooltip enable-tooltip"
+  class="d-inline-flex gap-1 align-items-top"
+>
+  <span><%+ component %></span>
+  <span
+    data-bs-toggle="tooltip"
+    data-bs-placement="right"
+    data-bs-title="<%- tooltip %>"
+    data-bs-html="<%= html %>"
+    class="material-symbols-outlined fw-bold"
+    >
+      <%= icon %>
+  </span>
+</span>
diff --git a/pgml-dashboard/src/components/inputs/labels/with_tooltip/with_tooltip.scss b/pgml-dashboard/src/components/inputs/labels/with_tooltip/with_tooltip.scss
@@ -0,0 +1,6 @@
+span[data-controller="inputs-labels-with-tooltip enable-tooltip"] {
+    span[data-bs-toggle="tooltip"] {
+        color: #{$slate-tint-100};
+        font-size: 1.2rem;
+    }
+}
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -5,6 +5,9 @@
 pub mod checkbox;
 pub use checkbox::Checkbox;
 
+// src/components/inputs/labels
+pub mod labels;
+
 // src/components/inputs/radio
 pub mod radio;
 pub use radio::Radio;
diff --git a/pgml-dashboard/src/components/inputs/text/input/input.scss b/pgml-dashboard/src/components/inputs/text/input/input.scss
@@ -1,7 +1,7 @@
 div[data-controller="inputs-text-input"] {
     --bs-danger: #{$peach-shade-100};
 
-    span.material-symbols-outlined {
+    span.inputs-text-input-icon{
         margin-left: -40px;
         color: #{$slate-shade-100};
 
diff --git a/pgml-dashboard/src/components/inputs/text/input/template.html b/pgml-dashboard/src/components/inputs/text/input/template.html
@@ -26,7 +26,7 @@
 
     <% if let Some(icon) = icon { %>
       <span
-        class="<%= icon_classes %>"
+        class="<%= icon_classes %> inputs-text-input-icon"
         data-action="<%= icon_actions %>">
         <%= icon %>
       </span>
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
@@ -8,6 +8,7 @@
 <% use crate::components::inputs::select::{Select, Option}; %>
 <% use crate::components::inputs::{SwitchV2, Radio, Checkbox}; %>
 <% use crate::components::cards::{Rgb, Secondary, Primary}; %>
+<% use crate::components::inputs::labels::WithTooltip; %>
 
 <div class="container" data-controller="pages-demo">
   <div class="py-5">
@@ -59,8 +60,14 @@
   </div>
 
   <div class="py-5">
+    <% 
+      let label = WithTooltip::new("Name".into())
+        .tooltip("Your full name.")
+        .icon("info");
+    %>
+
     <%+ Input::new()
-      .label("What is your name?".into())
+      .label(label.into())
       .icon("person")
       .placeholder("Enter your name")
       .name("name")
@@ -201,4 +208,16 @@
       </div>
     </div>
   </div>
+
+  <div class="py-5">
+    <%+ WithTooltip::new("Model".into())
+        .tooltip("A model is great, but two is better.")
+        .icon("help_outline") %>
+  </div>
+
+  <div class="py-5">
+    <%+ WithTooltip::new("Model".into())
+        .tooltip_html("A model is great<br>, but<br> two<br> is better.")
+        .icon("help_outline") %>
+  </div>
 </div>
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -21,6 +21,7 @@
 @import "../../src/components/icons/checkmark/checkmark.scss";
 @import "../../src/components/icons/twitter/twitter.scss";
 @import "../../src/components/inputs/checkbox/checkbox.scss";
+@import "../../src/components/inputs/labels/with_tooltip/with_tooltip.scss";
 @import "../../src/components/inputs/radio/radio.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
 @import "../../src/components/inputs/range_group_v_2/range_group_v_2.scss";
diff --git a/pgml-dashboard/static/css/scss/components/_tooltips.scss b/pgml-dashboard/static/css/scss/components/_tooltips.scss
@@ -1,9 +1,10 @@
 .tooltip {
-    --bs-tooltip-bg: #{$primary};
-    --bs-tooltip-color: #fff;
-    --bs-tooltip-arrow-width: 0;
-    --bs-tooltip-arrow-height: 0;
+    --bs-tooltip-bg: #{$gray-800};
+    --bs-tooltip-color:#{$white};
+    --bs-tooltip-arrow-width: 29px;
+    --bs-tooltip-arrow-height: 14px;
     --bs-tooltip-margin: 0 0 1rem 0;
-    --bs-tooltip-padding-y: 16px;
-    --bs-tooltip-padding-x: 16px;
+    --bs-tooltip-padding-y: 10px;
+    --bs-tooltip-padding-x: 10px;
+    --bs-tooltip-opacity: 1.0;
 }
diff --git a/pgml-dashboard/static/js/copy.js b/pgml-dashboard/static/js/copy.js
@@ -31,7 +31,10 @@ export default class extends Controller {
         navigator.clipboard.writeText(text)
 
         const toastElement = createToast('Copied to clipboard');
-        showToast(toastElement);
+
+        if (toastElement) {
+          showToast(toastElement);
+        }
     }
 
 }
diff --git a/pgml-dashboard/static/js/utilities/toast.js b/pgml-dashboard/static/js/utilities/toast.js
@@ -12,12 +12,17 @@ function createToast(message) {
   toastElement.appendChild(toastBodyElement);
 
   const container = document.getElementById("toast-container");
-  container.appendChild(toastElement);
 
-  // remove from DOM when no longer needed
-  toastElement.addEventListener("hidden.bs.toast", (e) => e.target.remove());
+  if (container) {
+    container.appendChild(toastElement);
 
-  return toastElement;
+    // remove from DOM when no longer needed
+    toastElement.addEventListener("hidden.bs.toast", (e) => e.target.remove());
+
+    return toastElement;
+  } else {
+    return null;
+  }
 }
 
 function showToast(toastElement, config) {
