local-it/mitgliederverwaltung
local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 59 Pull requests 5 Projects 2 Releases 5 Packages 1 Activity Actions

feat(member-live): unify the overview settings menu and add a reset-button tooltip

Browse source
This commit is contained in:
Simon 2026-07-16 09:39:04 +02:00
parent 561463725a
commit ca2aaa069c
5 changed files with 33 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/css/app.css
View file

@ -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;

15
assets/js/app.js
View file

@ -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