juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initialize tooltips dynamically

Browse source
This commit is contained in:
Konrad Szwarc 2023-01-31 21:55:15 +01:00
parent 544ad70d87
commit f51c4044b9
1 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/web/scripts/initialize-tooltips.ts
View file

@ -1,5 +1,4 @@
import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom'; import type { Placement } from '@floating-ui/dom';
import { nanoid } from 'nanoid';
interface UpdateTooltipOptions { interface UpdateTooltipOptions {
element: HTMLElement; element: HTMLElement;
@ -7,6 +6,12 @@ interface UpdateTooltipOptions {
placement: Placement; placement: Placement;
} }
const elementsWithTooltipData = [...document.querySelectorAll('[data-tooltip]')] as HTMLElement[];
if (elementsWithTooltipData.length > 0) {
Promise.all([import('@floating-ui/dom'), import('nanoid')]).then(([floatingUi, { nanoid }]) => {
const { autoUpdate, computePosition, flip, offset, shift } = floatingUi;
const updateTooltip = const updateTooltip =
({ element, tooltip, placement }: UpdateTooltipOptions) => ({ element, tooltip, placement }: UpdateTooltipOptions) =>
() => { () => {
@ -59,10 +64,7 @@ const creteTooltipsForElements = (elements: HTMLElement[]) => {
return tooltips; return tooltips;
}; };
const elements = [...document.querySelectorAll('[data-tooltip]')] as HTMLElement[]; creteTooltipsForElements(elementsWithTooltipData).forEach(({ element, tooltip }) => {
const elementsWithTooltips = creteTooltipsForElements(elements);
elementsWithTooltips.forEach(({ element, tooltip }) => {
const placement = (element.dataset.tooltipPlacement ?? 'top') as Placement; const placement = (element.dataset.tooltipPlacement ?? 'top') as Placement;
const updateFn = updateTooltip({ element, tooltip, placement }); const updateFn = updateTooltip({ element, tooltip, placement });
@ -71,3 +73,5 @@ elementsWithTooltips.forEach(({ element, tooltip }) => {
autoUpdate(element, tooltip, updateFn); autoUpdate(element, tooltip, updateFn);
addListeners(element, tooltip, updateFn); addListeners(element, tooltip, updateFn);
}); });
});
}