assets/css/app.css

@@ -899,15 +899,16 @@
 }
 
 /*
- * Sort-header tooltip. Rendered via the native Popover API (see the SortTooltip
+ * Popover tooltip (sortable column headers, column-manager reset button).
- * JS hook), so it lives in the browser TOP LAYER: it is not clipped by the
+ * Rendered via the native Popover API (see the PopoverTooltip JS hook), so it
- * members table's overflow (overflow-x:auto forces overflow-y:auto, which used
+ * lives in the browser TOP LAYER: it is not clipped by the members table's
- * to clip a CSS pseudo-tooltip below the header) and paints above the sticky
+ * overflow (overflow-x:auto forces overflow-y:auto, which used to clip a CSS
- * header, neighbor cells, and the pinned checkbox column's fade — without any
+ * pseudo-tooltip below the header) and paints above the sticky header, neighbor
- * z-index hacks. This block only resets the popover UA defaults and gives it a
+ * cells, and the pinned checkbox column's fade — without any z-index hacks. This
- * small daisyUI-flavoured tooltip look; the JS hook sets top/left each show.
+ * block only resets the popover UA defaults and gives it a small daisyUI-
+ * flavoured tooltip look; the JS hook sets top/left each show.
  */
-.sort-tooltip {
+.popover-tooltip {
   position: fixed;
   inset: auto;
   margin: 0;

assets/js/app.js

@@ -352,14 +352,15 @@ Hooks.SortableList = {
   }
 }
 
-// SortTooltip hook: shows the sort-header hint in the browser TOP LAYER via the
+// PopoverTooltip hook: shows a hint (referenced by data-tooltip-id) in the
-// native Popover API, so it escapes the members table's overflow clipping
+// browser TOP LAYER via the native Popover API, so it escapes the members
-// (overflow-x:auto forces overflow-y:auto, which clips a CSS tooltip below the
+// table's overflow clipping (overflow-x:auto forces overflow-y:auto, which clips
-// header) and paints above the sticky header, neighbor cells, and the pinned
+// a CSS tooltip below the header) and paints above the sticky header, neighbor
-// checkbox column's fade — no z-index fight. The popover is shown on hover AND
+// cells, and the pinned checkbox column's fade — no z-index fight. Shown on hover
-// keyboard focus and positioned next to the header with getBoundingClientRect
+// AND keyboard focus, positioned next to the trigger with getBoundingClientRect
 // (portable; CSS anchor-positioning is not yet supported in Safari/Firefox).
-Hooks.SortTooltip = {
+// Used by the sortable column headers and the column-manager reset button.
+Hooks.PopoverTooltip = {
   mounted() {
     this.tip = document.getElementById(this.el.dataset.tooltipId)
     // Feature-detect: without Popover API support fall back to no visual tooltip

lib/mv_web/components/core_components.ex

@@ -589,17 +589,29 @@ defmodule MvWeb.CoreComponents do
                 </button>
                 <button
                   :if={@show_reset_button}
+                  id={"#{@testid}-reset"}
                   type="button"
                   role="menuitem"
                   aria-label={gettext("Reset to default")}
-                  title={gettext("Reset to default")}
+                  aria-describedby={"#{@testid}-reset-tooltip"}
                   phx-click="reset_fields"
                   phx-target={@phx_target}
+                  phx-hook="PopoverTooltip"
+                  data-tooltip-id={"#{@testid}-reset-tooltip"}
                   class="btn btn-xs btn-ghost"
                   data-testid="dropdown-reset"
                 >
                   <.icon name="hero-arrow-uturn-left" class="size-4" />
                 </button>
+                <div
+                  :if={@show_reset_button}
+                  id={"#{@testid}-reset-tooltip"}
+                  popover="manual"
+                  role="tooltip"
+                  class="popover-tooltip"
+                >
+                  {gettext("Reset to default")}
+                </div>
               </div>
             </div>
           </li>

lib/mv_web/live/components/sort_header_component.ex

@@ -37,7 +37,7 @@ defmodule MvWeb.Components.SortHeaderComponent do
         class="link link-hover no-underline w-full flex items-center gap-1 text-left text-current select-none"
         phx-click="sort"
         phx-value-field={@field}
-        phx-hook="SortTooltip"
+        phx-hook="PopoverTooltip"
         data-tooltip-id={@tooltip_id}
         data-testid={@field}
       >
@@ -54,7 +54,7 @@ defmodule MvWeb.Components.SortHeaderComponent do
           />
         <% end %>
       </button>
-      <div id={@tooltip_id} popover="manual" role="tooltip" class="sort-tooltip">
+      <div id={@tooltip_id} popover="manual" role="tooltip" class="popover-tooltip">
         {aria_sort(@field, @sort_field, @sort_order, @hint)}
       </div>
     </div>

lib/mv_web/live/components/view_settings_dropdown_component.ex

@@ -48,6 +48,7 @@ defmodule MvWeb.Components.ViewSettingsDropdownComponent do
         <li role="none" class="mb-1 px-2">
           <span class="font-semibold">{gettext("View settings")}</span>
         </li>
+        <li role="separator" class="divider my-1"></li>
 
         <.toggle_item
           setting="density"