Replace native tooltips with simplified, generic component (plausible…

…#4528)

* Replace native tooltips with simplified, generic component

* Make tooltip a button?

* Revert "Make tooltip a button?"

This reverts commit adacc56.

lib/plausible_web/components/billing/plan_box.ex

@@ -231,24 +231,24 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
         Upgrade
       </PlausibleWeb.Components.Billing.paddle_button>
     <% end %>
-    <p
-      :if={@disabled_message}
-      class="h-0 text-center text-sm text-red-700 dark:text-red-500 disabled-message"
-    >
-      <%= if @exceeded_plan_limits != [] do %>
-        <PlausibleWeb.Components.Generic.tooltip class="text-sm text-red-700 dark:text-red-500 mt-1 justify-center">
-          <%= @disabled_message %>
-          <:tooltip_content>
-            Your usage exceeds the following limit(s):<br /><br />
-            <p :for={limit <- @exceeded_plan_limits}>
-              <%= Phoenix.Naming.humanize(limit) %><br />
-            </p>
-          </:tooltip_content>
-        </PlausibleWeb.Components.Generic.tooltip>
-      <% else %>
+    <PlausibleWeb.Components.Generic.tooltip :if={@exceeded_plan_limits != [] && @disabled_message}>
+      <div class="pt-2 text-sm w-full flex items-center text-red-700 dark:text-red-500 justify-center">
         <%= @disabled_message %>
-      <% end %>
-    </p>
+        <Heroicons.information_circle class="hidden sm:block w-5 h-5 sm:ml-2" />
+      </div>
+      <:tooltip_content>
+        Your usage exceeds the following limit(s):<br /><br />
+        <p :for={limit <- @exceeded_plan_limits}>
+          <%= Phoenix.Naming.humanize(limit) %><br />
+        </p>
+      </:tooltip_content>
+    </PlausibleWeb.Components.Generic.tooltip>
+    <div
+      :if={@disabled_message && @exceeded_plan_limits == []}
+      class="pt-2 text-sm w-full text-red-700 dark:text-red-500 text-center"
+    >
+      <%= @disabled_message %>
+    </div>
     """
   end
 

lib/plausible_web/components/generic.ex

@@ -335,11 +335,7 @@ defmodule PlausibleWeb.Components.Generic do
     """
   end
 
-  attr :wrapper_class, :any, default: ""
-  attr :class, :any, default: ""
-  attr :icon?, :boolean, default: true
   attr :sticky?, :boolean, default: true
-  attr :position, :string, default: "bottom-10 margin-x-auto left-10 right-10"
   slot :inner_block, required: true
   slot :tooltip_content, required: true
 
@@ -352,26 +348,28 @@ defmodule PlausibleWeb.Components.Generic do
     assigns = assign(assigns, wrapper_data: wrapper_data, show_inner: show_inner)
 
     ~H"""
-    <div x-data={@wrapper_data} class={["tooltip-wrapper relative", @wrapper_class]}>
-      <p
+    <div x-data={@wrapper_data} class="tooltip-wrapper w-full relative">
+      <div
+        x-cloak
+        x-show={@show_inner}
+        class="tooltip-content z-[1000] bg-gray-900 rounded text-white absolute bottom-24 sm:bottom-7 left-0 sm:w-72 p-4 text-sm font-medium"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+      >
+        <%= render_slot(List.first(@tooltip_content)) %>
+      </div>
+      <div
         x-on:click="sticky = true; hovered = true"
         x-on:click.outside="sticky = false; hovered = false"
         x-on:mouseover="hovered = true"
         x-on:mouseout="hovered = false"
-        class={["cursor-pointer flex align-items-center", @class]}
       >
         <%= render_slot(@inner_block) %>
-        <Heroicons.information_circle :if={@icon?} class="w-5 h-5 ml-2" />
-      </p>
-      <span
-        x-show={@show_inner}
-        class={[
-          "bg-gray-900 pointer-events-none absolute transition-opacity p-4 rounded text-sm text-white",
-          @position
-        ]}
-      >
-        <%= render_slot(List.first(@tooltip_content)) %>
-      </span>
+      </div>
     </div>
     """
   end

lib/plausible_web/live/imports_exports_settings.ex

@@ -143,7 +143,7 @@ defmodule PlausibleWeb.Live.ImportsExportsSettings do
         <div :if={@entry.live_status == SiteImport.failed()} class="ml-2 mr-1">
           Import failed -
         </div>
-        <.tooltip :if={@entry.tooltip} wrapper_class={[@label_class, "grow"]} class="justify-left">
+        <.tooltip :if={@entry.tooltip}>
           <%= Plausible.Imported.SiteImport.label(@entry.site_import) %>
           <:tooltip_content>
             <.notice_message message_label={@entry.tooltip} />

lib/plausible_web/live/installation.ex

@@ -296,7 +296,7 @@ defmodule PlausibleWeb.Live.Installation do
           <%= @label %>
         </label>
         <div class="ml-2">
-          <.tooltip sticky?={false} icon?={false} position="z-50 w-64 hidden sm:block">
+          <.tooltip sticky?={false}>
             <:tooltip_content>
               <%= @tooltip %>
               <br /><br />Click to learn more.

lib/plausible_web/live/shields/country_rules.ex

@@ -104,7 +104,7 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do
         </p>
         <div
           :if={not Enum.empty?(@country_rules)}
-          class="mt-8 overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
+          class="mt-8 overflow-visible border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
         >
           <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900">
             <thead class="bg-gray-50 dark:bg-gray-900">
@@ -131,15 +131,14 @@ defmodule PlausibleWeb.Live.Shields.CountryRules do
                 <% country = Location.Country.get_country(rule.country_code) %>
                 <tr class="text-gray-900 dark:text-gray-100">
                   <td class="px-6 py-4 text-sm font-medium">
-                    <div class="flex items-center">
-                      <span
-                        id={"country-#{rule.id}"}
-                        class="mr-4 cursor-help border-b border-dotted border-gray-400"
-                        title={"Added at #{format_added_at(rule.inserted_at, @site.timezone)} by #{rule.added_by}"}
-                      >
+                    <PlausibleWeb.Components.Generic.tooltip>
+                      <:tooltip_content>
+                        Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %>
+                      </:tooltip_content>
+                      <span id={"country-#{rule.id}"} class="mr-4 cursor-help">
                         <%= country.flag %> <%= country.name %>
                       </span>
-                    </div>
+                    </PlausibleWeb.Components.Generic.tooltip>
                   </td>
                   <td class="px-6 py-4 text-sm text-gray-500">
                     <span :if={rule.action == :deny}>

lib/plausible_web/live/shields/hostname_rules.ex

@@ -121,7 +121,7 @@ defmodule PlausibleWeb.Live.Shields.HostnameRules do
         </p>
         <div
           :if={not Enum.empty?(@hostname_rules)}
-          class="mt-8 overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
+          class="mt-8 overflow-visible border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
         >
           <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900">
             <thead class="bg-gray-50 dark:bg-gray-900">
@@ -146,16 +146,18 @@ defmodule PlausibleWeb.Live.Shields.HostnameRules do
             <tbody>
               <%= for rule <- @hostname_rules do %>
                 <tr class="text-gray-900 dark:text-gray-100">
-                  <td class="px-6 py-4 text-sm font-medium max-w-xs truncate text-ellipsis overflow-hidden">
-                    <div class="flex items-center">
-                      <span
+                  <td class="px-6 py-4 text-sm font-medium">
+                    <PlausibleWeb.Components.Generic.tooltip>
+                      <:tooltip_content>
+                        Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %>
+                      </:tooltip_content>
+                      <div
                         id={"hostname-#{rule.id}"}
-                        class="mr-4 cursor-help border-b border-dotted border-gray-400 text-ellipsis overflow-hidden"
-                        title={"#{rule.hostname}\n\nAdded at #{format_added_at(rule.inserted_at, @site.timezone)} by #{rule.added_by}"}
+                        class="mr-4 cursor-help text-ellipsis truncate max-w-xs"
                       >
                         <%= rule.hostname %>
-                      </span>
-                    </div>
+                      </div>
+                    </PlausibleWeb.Components.Generic.tooltip>
                   </td>
                   <td class="px-6 py-4 text-sm text-gray-500">
                     <div class="flex items-center">

lib/plausible_web/live/shields/ip_rules.ex

@@ -125,7 +125,7 @@ defmodule PlausibleWeb.Live.Shields.IPRules do
         </p>
         <div
           :if={not Enum.empty?(@ip_rules)}
-          class="mt-8 overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
+          class="mt-8 overflow-visible border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
         >
           <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900">
             <thead class="bg-gray-50 dark:bg-gray-900">
@@ -158,13 +158,14 @@ defmodule PlausibleWeb.Live.Shields.IPRules do
                 <tr class="text-gray-900 dark:text-gray-100">
                   <td class="px-6 py-4 text-xs font-medium">
                     <div class="flex items-center">
-                      <span
-                        id={"inet-#{rule.id}"}
-                        class="font-mono mr-4 cursor-help border-b border-dotted border-gray-400"
-                        title={"Added at #{format_added_at(rule.inserted_at, @site.timezone)} by #{rule.added_by}"}
-                      >
-                        <%= rule.inet %>
-                      </span>
+                      <.tooltip>
+                        <:tooltip_content>
+                          Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %>
+                        </:tooltip_content>
+                        <span id={"inet-#{rule.id}"} class="font-mono mr-4 cursor-help">
+                          <%= rule.inet %>
+                        </span>
+                      </.tooltip>
 
                       <span
                         :if={to_string(rule.inet) == @remote_ip}

lib/plausible_web/live/shields/page_rules.ex

@@ -113,7 +113,7 @@ defmodule PlausibleWeb.Live.Shields.PageRules do
         </p>
         <div
           :if={not Enum.empty?(@page_rules)}
-          class="mt-8 overflow-hidden border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
+          class="mt-8 overflow-visible border-b border-gray-200 shadow dark:border-gray-900 sm:rounded-lg"
         >
           <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-900">
             <thead class="bg-gray-50 dark:bg-gray-900">
@@ -138,16 +138,18 @@ defmodule PlausibleWeb.Live.Shields.PageRules do
             <tbody>
               <%= for rule <- @page_rules do %>
                 <tr class="text-gray-900 dark:text-gray-100">
-                  <td class="px-6 py-4 text-sm font-medium max-w-xs truncate text-ellipsis overflow-hidden">
-                    <div class="flex items-center">
-                      <span
+                  <td class="px-6 py-4 text-sm font-medium">
+                    <PlausibleWeb.Components.Generic.tooltip>
+                      <:tooltip_content>
+                        Added at <%= format_added_at(rule.inserted_at, @site.timezone) %> by <%= rule.added_by %>
+                      </:tooltip_content>
+                      <div
                         id={"page-#{rule.id}"}
-                        class="mr-4 cursor-help border-b border-dotted border-gray-400 text-ellipsis overflow-hidden"
-                        title={"#{rule.page_path}\n\nAdded at #{format_added_at(rule.inserted_at, @site.timezone)} by #{rule.added_by}"}
+                        class="mr-4 cursor-help text-ellipsis truncate max-w-xs"
                       >
                         <%= rule.page_path %>
-                      </span>
-                    </div>
+                      </div>
+                    </PlausibleWeb.Components.Generic.tooltip>
                   </td>
                   <td class="px-6 py-4 text-sm text-gray-500">
                     <div class="flex items-center">

test/plausible_web/live/choose_plan_test.exs

@@ -22,7 +22,7 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do
   @slider_value "#slider-value"
 
   @growth_plan_box "#growth-plan-box"
-  @growth_plan_tooltip "#growth-plan-box .tooltip-wrapper span"
+  @growth_plan_tooltip "#growth-plan-box .tooltip-content"
   @growth_price_tag_amount "#growth-price-tag-amount"
   @growth_price_tag_interval "#growth-price-tag-interval"
   @growth_highlight_pill "#{@growth_plan_box} #highlight-pill"
@@ -842,18 +842,18 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do
 
       assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400"
       assert text_of_element(doc, @growth_checkout_button) =~ "Currently on this plan"
-      refute element_exists?(doc, "#{@growth_checkout_button} + p")
+      refute element_exists?(doc, "#{@growth_checkout_button} + div")
 
       assert class_of_element(doc, @business_checkout_button) =~ "pointer-events-none bg-gray-400"
 
-      assert text_of_element(doc, "#{@business_checkout_button} + p") =~
+      assert text_of_element(doc, "#{@business_checkout_button} + div") =~
                "Please update your billing details first"
 
       doc = set_slider(lv, "1M")
 
       assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400"
 
-      assert text_of_element(doc, "#{@growth_checkout_button} + p") =~
+      assert text_of_element(doc, "#{@growth_checkout_button} + div") =~
                "Please update your billing details first"
     end
   end
@@ -875,18 +875,18 @@ defmodule PlausibleWeb.Live.ChoosePlanTest do
 
       assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400"
       assert text_of_element(doc, @growth_checkout_button) =~ "Currently on this plan"
-      refute element_exists?(doc, "#{@growth_checkout_button} + p")
+      refute element_exists?(doc, "#{@growth_checkout_button} + div")
 
       assert class_of_element(doc, @business_checkout_button) =~ "pointer-events-none bg-gray-400"
 
-      assert text_of_element(doc, "#{@business_checkout_button} + p") =~
+      assert text_of_element(doc, "#{@business_checkout_button} + div") =~
                "Please update your billing details first"
 
       doc = set_slider(lv, "1M")
 
       assert class_of_element(doc, @growth_checkout_button) =~ "pointer-events-none bg-gray-400"
 
-      assert text_of_element(doc, "#{@growth_checkout_button} + p") =~
+      assert text_of_element(doc, "#{@growth_checkout_button} + div") =~
                "Please update your billing details first"
     end
   end

test/plausible_web/live/shields/countries_test.exs

@@ -98,10 +98,10 @@ defmodule PlausibleWeb.Live.Shields.CountriesTest do
 
       added_by = "#{user.name} <#{user.email}>"
 
-      assert [%{id: id, country_code: "EE", added_by: ^added_by}] =
+      assert [%{country_code: "EE", added_by: ^added_by}] =
                Shields.list_country_rules(site)
 
-      tooltip = text_of_attr(html, "#country-#{id}", "title")
+      tooltip = text_of_element(html, ".tooltip-content")
       assert tooltip =~ "Added at #{Date.utc_today()}"
       assert tooltip =~ "by #{added_by}"
     end

test/plausible_web/live/shields/ip_addresses_test.exs

@@ -139,9 +139,9 @@ defmodule PlausibleWeb.Live.Shields.IPAddressesTest do
       assert html =~ ip
       assert html =~ user.name
 
-      assert [%{id: id}] = Shields.list_ip_rules(site)
+      assert [%{id: _id}] = Shields.list_ip_rules(site)
 
-      tooltip = text_of_attr(html, "#inet-#{id}", "title")
+      tooltip = text_of_element(html, ".tooltip-content")
       assert tooltip =~ "Added at #{Date.utc_today()}"
       assert tooltip =~ "by #{user.name} <#{user.email}>"