Rewrite tooltips into function component

lib/livebook_web/helpers.ex

@@ -193,4 +193,56 @@ defmodule LivebookWeb.Helpers do
     </button>
     """
   end
+
+  @doc """
+  Adds a tooltip to the inner content.
+
+  ## Example
+
+      <.tooltip label="Click me">
+        <button>...</button>
+      <./tooltip>
+
+      <.tooltip
+        label="Click me"
+        direction="right"
+        distance="28px"
+        if={@some_condition}>
+        <button>...</button>
+      <./tooltip>
+  """
+  def tooltip(assigns)
+
+  def tooltip(%{if: false} = assigns) do
+    ~H"""
+    <span>
+      <%= render_block(@inner_block) %>
+    </span>
+    """
+  end
+
+  def tooltip(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:direction, fn -> "top" end)
+      |> assign_new(:distance, fn -> "4px" end)
+      |> assign_new(:class, fn -> "" end)
+      |> assign_new(:style, fn -> "" end)
+      |> assign(:attrs, assigns_to_attributes(assigns, [:direction, :label, :class, :style]))
+
+    if assigns.direction not in ["top", "bottom", "right", "left"] do
+      raise ArgumentError,
+            ~s{expected direction to be either "top", "bottom", "right" or "left", got: #{inspect(assigns.direction)}}
+    end
+
+    ~H"""
+    <span
+      class={"tooltip #{@direction} #{@class}"}
+      aria-label={@label}
+      style={"--distance: #{@distance}; #{@style}"}
+      {@attrs}>
+      <%= render_block(@inner_block) %>
+    </span>
+    """
+  end
 end

lib/livebook_web/live/home_live.ex

@@ -72,17 +72,14 @@ defmodule LivebookWeb.HomeLive do
                         to: Routes.session_path(@socket, :page, session_id_by_path(@path, @session_summaries)),
                         class: "button button-blue" %>
                 <% else %>
-                  <span {if(
+                  <.tooltip label="This file is write-protected, please fork instead"
-                    File.regular?(@path) and not file_writable?(@path),
+                    if={File.regular?(@path) and not file_writable?(@path)}>
-                    do: [class: "tooltip top", aria_label: "This file is write-protected, please fork instead"],
-                    else: []
-                  )}>
                     <button class="button button-blue"
                       phx-click="open"
                       disabled={not path_openable?(@path, @session_summaries)}>
                       Open
                     </button>
-                  </span>
+                  </.tooltip>
                 <% end %>
               </div>
             <% end %>

lib/livebook_web/live/output/table_dynamic_live.ex

@@ -51,11 +51,11 @@ defmodule LivebookWeb.Output.TableDynamicLive do
       <!-- Actions -->
       <div class="flex space-x-2">
         <%= if :refetch in @features do %>
-          <span class="tooltip left" aria-label="Refetch">
+          <.tooltip label="Refetch" direction="left">
             <button class="icon-button" phx-click="refetch">
               <.remix_icon icon="refresh-line" class="text-xl" />
             </button>
-          </span>
+          </.tooltip>
         <% end %>
       </div>
       <!-- Pagination -->

lib/livebook_web/live/session_live.ex

@@ -147,20 +147,20 @@ defmodule LivebookWeb.SessionLive do
                     <span><%= user.name || "Anonymous" %></span>
                   </button>
                   <%= if client_pid != @self do %>
-                    <span class="tooltip left" aria-label="Follow this user"
+                    <.tooltip label="Follow this user" direction="left"
                       data-element="client-follow-toggle"
                       data-meta="follow">
                       <button class="icon-button">
                         <.remix_icon icon="pushpin-line" class="text-lg" />
                       </button>
-                    </span>
+                    </.tooltip>
-                    <span class="tooltip left" aria-label="Unfollow this user"
+                    <.tooltip label="Unfollow this user" direction="left"
                       data-element="client-follow-toggle"
                       data-meta="unfollow">
                       <button class="icon-button">
                         <.remix_icon icon="pushpin-fill" class="text-lg" />
                       </button>
-                    </span>
+                    </.tooltip>
                   <% end %>
                 </div>
               <% end %>

lib/livebook_web/live/session_live/bin_component.ex

@@ -70,22 +70,22 @@ defmodule LivebookWeb.SessionLive.BinComponent do
                     <span class="font-semibold"><%= format_date_relatively(entry.deleted_at) %></span>
                   </p>
                   <div class="flex justify-end space-x-2">
-                    <span class="tooltip left" aria-label="Copy source">
+                    <.tooltip label="Copy source" direction="left">
                       <button class="icon-button"
                         id={"bin-cell-#{cell.id}-clipcopy"}
                         phx-hook="ClipCopy"
                         data-target-id={"bin-cell-#{cell.id}-source"}>
                         <.remix_icon icon="clipboard-line" class="text-lg" />
                       </button>
-                    </span>
+                    </.tooltip>
-                    <span class="tooltip left" aria-label="Restore">
+                    <.tooltip label="Restore" direction="left">
                       <button class="icon-button"
                         phx-click="restore"
                         phx-value-cell_id={entry.cell.id}
                         phx-target={@myself}>
                         <.remix_icon icon="arrow-go-back-line" class="text-lg" />
                       </button>
-                    </span>
+                    </.tooltip>
                   </div>
                 </div>
                 <div class="markdown">

lib/livebook_web/live/session_live/cell_component.ex

@@ -20,17 +20,17 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     <div class="mb-1 flex items-center justify-end">
       <div class="relative z-20 flex items-center justify-end space-x-2" data-element="actions">
         <.cell_link_button cell_id={@cell_view.id} />
-        <span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
+        <.tooltip label="Edit content" data-element="enable-insert-mode-button">
           <button class="icon-button">
             <.remix_icon icon="pencil-line" class="text-xl" />
           </button>
-        </span>
+        </.tooltip>
-        <span class="tooltip top" aria-label="Insert image" data-element="insert-image-button">
+        <.tooltip label="Insert image" data-element="insert-image-button">
           <%= live_patch to: Routes.session_path(@socket, :cell_upload, @session_id, @cell_view.id),
                 class: "icon-button" do %>
             <.remix_icon icon="image-add-line" class="text-xl" />
           <% end %>
-        </span>
+        </.tooltip>
         <.move_cell_up_button cell_id={@cell_view.id} />
         <.move_cell_down_button cell_id={@cell_view.id} />
         <.delete_cell_button cell_id={@cell_view.id} />
@@ -158,59 +158,59 @@ defmodule LivebookWeb.SessionLive.CellComponent do
 
   defp cell_link_button(assigns) do
     ~H"""
-    <span class="tooltip top" aria-label="Link">
+    <.tooltip label="Link">
       <a href={"#cell-#{@cell_id}"} class="icon-button">
         <.remix_icon icon="link" class="text-xl" />
       </a>
-    </span>
+    </.tooltip>
     """
   end
 
   defp cell_settings_button(assigns) do
     ~H"""
-    <span class="tooltip top" aria-label="Cell settings">
+    <.tooltip label="Cell settings">
       <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell_id), class: "icon-button" do %>
         <.remix_icon icon="list-settings-line" class="text-xl" />
       <% end %>
-    </span>
+    </.tooltip>
     """
   end
 
   defp move_cell_up_button(assigns) do
     ~H"""
-    <span class="tooltip top" aria-label="Move up">
+    <.tooltip label="Move up">
       <button class="icon-button"
         phx-click="move_cell"
         phx-value-cell_id={@cell_id}
         phx-value-offset="-1">
         <.remix_icon icon="arrow-up-s-line" class="text-xl" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   defp move_cell_down_button(assigns) do
     ~H"""
-    <span class="tooltip top" aria-label="Move down">
+    <.tooltip label="Move down">
       <button class="icon-button"
         phx-click="move_cell"
         phx-value-cell_id={@cell_id}
         phx-value-offset="1">
         <.remix_icon icon="arrow-down-s-line" class="text-xl" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   defp delete_cell_button(assigns) do
     ~H"""
-    <span class="tooltip top" aria-label="Delete">
+    <.tooltip label="Delete">
       <button class="icon-button"
         phx-click="delete_cell"
         phx-value-cell_id={@cell_id}>
         <.remix_icon icon="delete-bin-6-line" class="text-xl" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
@@ -312,7 +312,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
       |> assign_new(:tooltip, fn -> nil end)
 
     ~H"""
-    <div class={"#{if(@tooltip, do: "tooltip")} bottom distant-medium"} aria-label={@tooltip}>
+    <.tooltip label={@tooltip} direction="bottom" distance="10px" if={@tooltip != nil}>
       <div class="flex items-center space-x-1">
         <div class="flex text-xs text-gray-400">
           <%= render_block(@inner_block) %>
@@ -327,7 +327,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
           <span class={"#{@circle_class} relative inline-flex rounded-full h-3 w-3"}></span>
         </span>
       </div>
-    </div>
+    </.tooltip>
     """
   end
 

lib/livebook_web/live/session_live/indicators_component.ex

@@ -7,27 +7,27 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
     <div class="flex flex-col space-y-2 items-center" data-element="notebook-indicators">
       <%= if @path do %>
         <%= if @dirty do %>
-          <span class="tooltip left" aria-label="Autosave pending">
+          <.tooltip label="Autosave pending" direction="left">
             <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
                   class: "icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50" do %>
               <.remix_icon icon="save-line" class="text-xl text-blue-500" />
             <% end %>
-          </span>
+          </.tooltip>
         <% else %>
-          <span class="tooltip left" aria-label="Notebook saved">
+          <.tooltip label="Notebook saved" direction="left">
             <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
                   class: "icon-button icon-outlined-button border-green-300 hover:bg-green-50 focus:bg-green-50" do %>
               <.remix_icon icon="save-line" class="text-xl text-green-400" />
             <% end %>
-          </span>
+          </.tooltip>
         <% end %>
       <% else %>
-        <span class="tooltip left" aria-label="Choose a file to save the notebook">
+        <.tooltip label="Choose a file to save the notebook" direction="left">
           <%= live_patch to: Routes.session_path(@socket, :file_settings, @session_id),
                 class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100" do %>
             <.remix_icon icon="save-line" class="text-xl text-gray-400" />
           <% end %>
-        </span>
+        </.tooltip>
       <% end %>
 
       <%= if @runtime do %>
@@ -35,67 +35,67 @@ defmodule LivebookWeb.SessionLive.IndicatorsComponent do
           status={elem(@global_evaluation_status, 0)}
           cell_id={elem(@global_evaluation_status, 1)} />
       <% else %>
-        <span class="tooltip left" aria-label="Choose a runtime to run the notebook in">
+        <.tooltip label="Choose a runtime to run the notebook in" direction="left">
           <%= live_patch to: Routes.session_path(@socket, :runtime_settings, @session_id),
                 class: "icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100" do %>
             <.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
           <% end %>
-        </span>
+        </.tooltip>
       <% end %>
 
       <%# Note: this indicator is shown/hidden using CSS based on the current mode %>
-      <span class="tooltip left" aria-label="Insert mode" data-element="insert-mode-indicator">
+      <.tooltip label="Insert mode" data-element="insert-mode-indicator" direction="left">
         <span class="text-sm text-gray-400 font-medium cursor-default">
           ins
         </span>
-      </span>
+      </.tooltip>
     </div>
     """
   end
 
   defp global_evaluation_status(%{status: :evaluating} = assigns) do
     ~H"""
-    <span class="tooltip left" aria-label="Go to evaluating cell">
+    <.tooltip label="Go to evaluating cell" direction="left">
       <button class="icon-button icon-outlined-button border-blue-400 hover:bg-blue-50 focus:bg-blue-50"
         data-element="focus-cell-button"
         data-target={@cell_id}>
         <.remix_icon icon="loader-3-line" class="text-xl text-blue-500 animate-spin" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   defp global_evaluation_status(%{status: :evaluated} = assigns) do
     ~H"""
-    <span class="tooltip left" aria-label="Go to last evaluated cell">
+    <.tooltip label="Go to last evaluated cell" direction="left">
       <button class="icon-button icon-outlined-button border-green-300 hover:bg-green-50 focus:bg-green-50"
         data-element="focus-cell-button"
         data-target={@cell_id}>
         <.remix_icon icon="loader-3-line" class="text-xl text-green-400" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   defp global_evaluation_status(%{status: :stale} = assigns) do
     ~H"""
-    <span class="tooltip left" aria-label="Go to first stale cell">
+    <.tooltip label="Go to first stale cell" direction="left">
       <button class="icon-button icon-outlined-button border-yellow-200 hover:bg-yellow-50 focus:bg-yellow-50"
         data-element="focus-cell-button"
         data-target={@cell_id}>
         <.remix_icon icon="loader-3-line" class="text-xl text-yellow-300" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   defp global_evaluation_status(%{status: :fresh} = assigns) do
     ~H"""
-    <span class="tooltip left" aria-label="Ready to evaluate">
+    <.tooltip label="Ready to evaluate" direction="left">
       <button class="icon-button icon-outlined-button border-gray-200 hover:bg-gray-100 focus:bg-gray-100 cursor-default">
         <.remix_icon icon="loader-3-line" class="text-xl text-gray-400" />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 end

lib/livebook_web/live/session_live/section_component.ex

@@ -18,33 +18,33 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
           <%# ^ Note it's important there's no space between <h2> and </h2>
             because we want the content to exactly match section name. %>
         <div class="flex space-x-2 items-center" data-element="section-actions">
-          <span class="tooltip top" aria-label="Link">
+          <.tooltip label="Link">
             <a href={"##{@section_view.html_id}"} class="icon-button">
               <.remix_icon icon="link" class="text-xl" />
             </a>
-          </span>
+          </.tooltip>
-          <span class="tooltip top" aria-label="Move up">
+          <.tooltip label="Move up">
             <button class="icon-button"
               phx-click="move_section"
               phx-value-section_id={@section_view.id}
               phx-value-offset="-1">
               <.remix_icon icon="arrow-up-s-line" class="text-xl" />
             </button>
-          </span>
+          </.tooltip>
-          <span class="tooltip top" aria-label="Move down">
+          <.tooltip label="Move down">
             <button class="icon-button"
               phx-click="move_section"
               phx-value-section_id={@section_view.id}
               phx-value-offset="1">
               <.remix_icon icon="arrow-down-s-line" class="text-xl" />
             </button>
-          </span>
+          </.tooltip>
-          <span class="tooltip top" aria-label="Delete">
+          <.tooltip label="Delete">
             <%= live_patch to: Routes.session_path(@socket, :delete_section, @session_id, @section_view.id),
                   class: "icon-button" do %>
               <.remix_icon icon="delete-bin-6-line" class="text-xl" />
             <% end %>
-          </span>
+          </.tooltip>
         </div>
       </div>
       <div class="container">

lib/livebook_web/live/sidebar_helpers.ex

@@ -32,23 +32,23 @@ defmodule LivebookWeb.SidebarHelpers do
 
   def button_item(assigns) do
     ~H"""
-    <span class="tooltip right distant" aria-label={@label}>
+    <.tooltip label={@label} direction="right" distance="28px">
       <button class="text-2xl text-gray-400 hover:text-gray-50 focus:text-gray-50 rounded-xl h-10 w-10 flex items-center justify-center"
         data-element={@data_element}>
         <.remix_icon icon={@icon} />
       </button>
-    </span>
+    </.tooltip>
     """
   end
 
   def link_item(assigns) do
     ~H"""
-    <span class="tooltip right distant" aria-label={@label}>
+    <.tooltip label={@label} direction="right" distance="28px">
       <%= live_patch to: @path,
             class: "text-gray-400 hover:text-gray-50 focus:text-gray-50 rounded-xl h-10 w-10 flex items-center justify-center #{if(@active, do: "text-gray-50 bg-gray-700")}" do %>
         <.remix_icon icon={@icon} class="text-2xl" />
       <% end %>
-    </span>
+    </.tooltip>
     """
   end
 
@@ -60,11 +60,11 @@ defmodule LivebookWeb.SidebarHelpers do
 
   def user_item(assigns) do
     ~H"""
-    <span class="tooltip right distant" aria-label="User profile">
+    <.tooltip label="User profile" direction="right" distance="28px">
       <%= live_patch to: @path, class: "text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center" do %>
         <.user_avatar user={@current_user} text_class="text-xs" />
       <% end %>
-    </span>
+    </.tooltip>
     """
   end
 end