Improve tooltips

AllYourBot · Jan 12, 2024 · e69a78f · e69a78f
1 parent f0f4d3d
commit e69a78f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -26,6 +26,25 @@
   scrollbar-width: none;
 }
 
+*, ::before, ::after {
+  --tooltip-tail: 7px;
+  --tooltip-tail-offset: calc(100% + 7px - var(--tooltip-tail));
+  --tooltip-offset: calc(100% + 7px + var(--tooltip-tail, 0px));
+  /* https://unused-css.com/blog/css-outer-glow/ */
+}
+
+.tooltip-bottom:before {
+  padding: 0.4rem 0.7rem !important;
+  box-shadow: 0px 3px 4px 0px #eeeeee29;
+}
+
+.tooltip-top:before {
+  padding: 0.4rem 0.7rem !important;
+  box-shadow: 0px -3px 4px 0px #eeeeee29;
+}
+
+
+
   /* Add this to center the modal */
   .modal-bg {
     background-color: rgba(0, 0, 0, 0.5);

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -16,11 +16,12 @@ def icon(name, opts = {})
     classes = opts[:class] || ""
     raise "Do not include w-# or h-# in the class, use :size instead" if classes.match?(/(\bw-|\bh-)/)
     classes += " w-[#{size}px] h-[#{size}px]"
+    title = opts.delete(:title)
 
-    if opts[:title]
-      direction = opts[:tooltip] || 'top'
+    if title
+      direction = opts[:tooltip] || 'bottom'
 
-      content_tag(:div, class: classes + " tooltip tooltip-#{direction} hover:tooltip-open", data: { tip: opts[:title].to_s }) do
+      content_tag(:div, class: classes + " tooltip tooltip-#{direction} hover:tooltip-open", data: { tip: title.to_s }) do
         heroicon name, **opts
       end
     else

diff --git a/app/views/conversations/show.html.erb b/app/views/conversations/show.html.erb
@@ -4,8 +4,8 @@
 
     <div id="left-content-container" class="flex flex-col flex-grow overflow-auto scrollbar-hide">
       <div id="left-content" class="flex-grow overflow-auto scrollbar-hide">
-        <div class="sticky top-0 pt-3 mb-1 bg-black">
-          <%= render 'gpt_sidebar', title: "ChatGPT but really long so it wraps", selected: false %>
+        <div class="sticky top-0 pt-3 mb-1 bg-black z-10">
+          <%= render 'gpt_sidebar', title: "ChatGPT", selected: false %>
         </div>
         <%= render 'gpt_sidebar', title: "Samantha" %>
         <%= render 'gpt_sidebar', title: "Samantha but really long so it wraps" %>

diff --git a/app/views/messages/_message.html.erb b/app/views/messages/_message.html.erb
@@ -14,12 +14,12 @@
         <%= message.content_text %>
       </div>
 
-      <div class="mt-2 flex justify-start gap-2 text-gray-400 invisible group-hover:visible">
+      <div class="mt-2 flex justify-start gap-2 text-gray-500 invisible group-hover:visible">
         <% if message.user? %>
-          <%= icon "pencil", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Edit", tooltip: :left %>
+          <%= icon "pencil-square", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Edit" %>
         <% else %>
-          <%= icon "clipboard", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Copy", tooltip: :left %>
-          <%= icon "arrow-path", variant: :micro, size: 18, class: 'hover:text-gray-600 cursor-pointer', title: "Retry", tooltip: :right %>
+          <%= icon "clipboard", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Copy" %>
+          <%= icon "arrow-path", variant: :outline, size: 18, class: 'hover:text-gray-900 cursor-pointer stroke-2', title: "Retry" %>
         <% end %>
       </div>
     </div>