fix: AFCL Tooltip is a native popover placed by CSS anchor positioning with a getBoundingClientRect fallback for older browsers, so core no longer loads flowbite AdminForth/2005

Author: ivictbor

adminforth/design/adoption.md

@@ -57,8 +57,7 @@ The cards of the landing gallery (`documentation/src/pages/index.tsx`) show eith
 
 ## Left in core
 
-- `afcl/Tooltip.vue` uses the flowbite `Tooltip`, `afcl/DatePicker.vue` and `components/CustomDateRangePicker.vue` use `flowbite-datepicker`.
-- The Tooltip import is the last place where core loads `flowbite`, and loading it also runs flowbite's auto-init of `data-*` attributes (`data-tooltip-target`, `data-dropdown-toggle`, …) on page load. Apps and plugins may rely on it (foreign-inline-list uses `data-tooltip-target`), so a native Tooltip has to come together with moving those usages to AFCL.
+- `afcl/DatePicker.vue` and `components/CustomDateRangePicker.vue` use `flowbite-datepicker`, the last flowbite package of core. `flowbite` itself is gone with its auto-init of `data-*` attributes (`data-tooltip-target`, `data-dropdown-toggle`, …), which ran only once on window `load`, so in the SPA it never reached elements rendered later.
 - Palette classes instead of tokens in `views/PageNotFound.vue`, `views/LoginView.vue`, `views/ListView.vue` (action badge), `renderers/URL.vue`, `afcl/BarChart.vue` (axis labels), the HTML in `utils/utils.ts` and a commented line in `components/Sidebar.vue`.
 
 ## Targets

adminforth/design/system-concepts.md

@@ -56,6 +56,8 @@ The header of the list page is a container named `header`. Below 896px (`@4xl/he
 
 flowbite is being removed step by step. Don't add new flowbite usages (`flowbite` JS components, `flowbite-datepicker`, `data-*-toggle` attributes). When you touch code which uses it, replace it with a native Vue implementation, usually an AFCL component. Example: the user menu moved from flowbite `Dropdown` to AFCL `DropdownMenu`.
 
+A floating layer is a `popover` element positioned by CSS anchor positioning, like `afcl/Tooltip.vue`. The top layer frees it from z-index and the overflow of parents. Browsers without anchor positioning (Safari before 26, Firefox before 147) get the position from `getBoundingClientRect` under `CSS.supports('anchor-name: --a')`.
+
 ## SPA dependencies
 
 Fonts and icons are dependencies of `adminforth/spa`. Apps install the SPA with npm or pnpm, so a new SPA dependency goes to both `spa/package-lock.json` and `spa/pnpm-lock.yaml`.

adminforth/pnpm-lock.yaml

@@ -55,7 +55,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "flag-icons": "^7.2.3",
-    "flowbite": "^3.1.2",
     "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^9.0.2",
     "portfinder": "^1.0.32",

adminforth/spa/package-lock.json

@@ -1,87 +1,111 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" :style="{ anchorName }" @mouseenter="show" @mouseleave="hide">
       <slot></slot>
   </div>
-  <teleport to="body" v-if="showTooltip">
+  <teleport to="body" v-if="isOpen">
     <div
+      ref="tooltipEl"
+      popover="manual"
       role="tooltip"
-      class="absolute z-[100] invisible inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover opacity-0 tooltip dark:bg-darkTooltipBackground dark:shadow-darkPopover"
-      ref="tooltip"
+      :data-placement="placement"
+      :style="{ positionAnchor: anchorName }"
+      class="afcl-tooltip-popover inline-block px-2.5 py-1.5 text-xs font-medium text-lightTooltipText dark:text-darkTooltipText transition-opacity duration-150 bg-lightTooltipBackground rounded-md shadow-popover dark:bg-darkTooltipBackground dark:shadow-darkPopover"
     >
       <slot name="tooltip"></slot>
-      <div class="tooltip-arrow" data-popper-arrow></div>
+      <div class="afcl-tooltip-arrow" :style="{ left: `${arrowLeft}px` }"></div>
     </div>
   </teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, type Ref } from 'vue';
-import { Tooltip } from 'flowbite';
+import { ref, nextTick, onBeforeUnmount, useId } from 'vue';
 
-const triggerEl = ref(null);
-const tooltip = ref(null);
-const showTooltip = ref(false);
-const tp: Ref<Tooltip|null> = ref(null);
+const OFFSET = 8;
+const SUPPORTS_ANCHOR = CSS.supports('anchor-name: --a');
 
-async function mouseOn() {
-  showTooltip.value = true;
+const anchorName = `--afcl-tooltip-${useId()}`;
+const triggerEl = ref<HTMLElement>();
+const tooltipEl = ref<HTMLElement>();
+const isOpen = ref(false);
+const placement = ref<'top' | 'bottom'>('bottom');
+const arrowLeft = ref(0);
+
+async function show() {
+  isOpen.value = true;
   await nextTick();
+  tooltipEl.value!.showPopover();
 
-  tp.value?.destroy();
+  const trigger = triggerEl.value!.getBoundingClientRect();
+  if (!SUPPORTS_ANCHOR) {
+    placeByRect(trigger);
+  }
+  const tooltip = tooltipEl.value!.getBoundingClientRect();
+  placement.value = tooltip.top < trigger.top ? 'top' : 'bottom';
+  arrowLeft.value = trigger.left + trigger.width / 2 - tooltip.left;
 
-  tp.value = new Tooltip(
-    tooltip.value,
-    triggerEl.value,
-    {
-      placement: 'bottom',
-      triggerType: 'hover',
-    },
-  );
+  document.addEventListener('keydown', onKeydown);
+}
 
-  tp.value.show();
+function hide() {
+  isOpen.value = false;
+  document.removeEventListener('keydown', onKeydown);
 }
 
-function mouseOff() {
-  tp.value?.hide();
-  tp.value?.destroy();
-  tp.value = null;
-  showTooltip.value = false;
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    hide();
+  }
 }
 
+// Safari before 26 and Firefox before 147 have no CSS anchor positioning
+function placeByRect(trigger: DOMRect) {
+  const el = tooltipEl.value!;
+  const { width, height } = el.getBoundingClientRect();
+  const fitsBelow = trigger.bottom + OFFSET + height <= window.innerHeight;
+  const top = fitsBelow ? trigger.bottom + OFFSET : trigger.top - OFFSET - height;
+  const left = Math.min(Math.max(trigger.left + (trigger.width - width) / 2, 0), window.innerWidth - width);
+  el.style.top = `${top}px`;
+  el.style.left = `${left}px`;
+}
+
+onBeforeUnmount(hide);
 </script>
 
 <style>
-.tooltip .tooltip-arrow,
-.tooltip .tooltip-arrow::before {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-}
-
-.tooltip .tooltip-arrow {
-  visibility: hidden;
+/* popover puts the tooltip into the top layer, so no z-index and no clipping by overflow of the parents */
+.afcl-tooltip-popover {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
 }
 
-.tooltip .tooltip-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
+@supports (anchor-name: --a) {
+  .afcl-tooltip-popover {
+    position-area: bottom;
+    position-try-fallbacks: flip-block;
+    margin-top: 8px;
+  }
 }
 
-.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
-  bottom: -4px;
+@starting-style {
+  .afcl-tooltip-popover {
+    opacity: 0;
+  }
 }
 
-.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
-  top: -4px;
+.afcl-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  transform: translateX(-50%) rotate(45deg);
 }
 
-.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
-  right: -4px;
+.afcl-tooltip-popover[data-placement='top'] > .afcl-tooltip-arrow {
+  bottom: -4px;
 }
 
-.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
-  left: -4px;
+.afcl-tooltip-popover[data-placement='bottom'] > .afcl-tooltip-arrow {
+  top: -4px;
 }
-</style>
+</style>

adminforth/spa/package.json

@@ -35,7 +35,6 @@
       <template v-if="isResourceReady && checkboxes.length" #selection>
         <Button
           @click="()=>{checkboxes = []}"
-          data-tooltip-target="tooltip-remove-all"
           variant="secondary"
           iconOnly
         >