diff --git a/assets/css/app.css b/assets/css/app.css index a859e9ae..5d7ff107 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -899,15 +899,16 @@ } /* - * Sort-header tooltip. Rendered via the native Popover API (see the SortTooltip - * JS hook), so it lives in the browser TOP LAYER: it is not clipped by the - * members table's overflow (overflow-x:auto forces overflow-y:auto, which used - * to clip a CSS pseudo-tooltip below the header) and paints above the sticky - * header, neighbor cells, and the pinned checkbox column's fade — without any - * z-index hacks. This block only resets the popover UA defaults and gives it a - * small daisyUI-flavoured tooltip look; the JS hook sets top/left each show. + * Popover tooltip (sortable column headers, column-manager reset button). + * Rendered via the native Popover API (see the PopoverTooltip JS hook), so it + * lives in the browser TOP LAYER: it is not clipped by the members table's + * overflow (overflow-x:auto forces overflow-y:auto, which used to clip a CSS + * pseudo-tooltip below the header) and paints above the sticky header, neighbor + * cells, and the pinned checkbox column's fade — without any z-index hacks. This + * 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; diff --git a/assets/js/app.js b/assets/js/app.js index db1e6322..73e52fa5 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -352,14 +352,15 @@ Hooks.SortableList = { } } -// SortTooltip hook: shows the sort-header hint in the browser TOP LAYER via the -// native Popover API, so it escapes the members table's overflow clipping -// (overflow-x:auto forces overflow-y:auto, which clips a CSS tooltip below the -// header) and paints above the sticky header, neighbor cells, and the pinned -// checkbox column's fade — no z-index fight. The popover is shown on hover AND -// keyboard focus and positioned next to the header with getBoundingClientRect +// PopoverTooltip hook: shows a hint (referenced by data-tooltip-id) in the +// browser TOP LAYER via the native Popover API, so it escapes the members +// table's overflow clipping (overflow-x:auto forces overflow-y:auto, which clips +// a CSS tooltip below the header) and paints above the sticky header, neighbor +// cells, and the pinned checkbox column's fade — no z-index fight. Shown on hover +// 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 diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex index b8d9b214..10cd6a42 100644 --- a/lib/mv_web/components/core_components.ex +++ b/lib/mv_web/components/core_components.ex @@ -589,17 +589,29 @@ defmodule MvWeb.CoreComponents do +