https://www.printnode.com/ui/js/info-button.js

1import {
2    computePosition,
3    flip,
4    shift,
5    offset,
6    arrow,
7} from 'https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]/+esm';
8
9(function (document) {
10
11    function update(button, tooltip, arrowElement) {
12        computePosition(button, tooltip, {
13            placement: 'top',
14            middleware: [
15            offset(6),
16            flip(),
17            shift({padding: 5}),
18            arrow({element: arrowElement}),
19            ],
20        }).then(({x, y, placement, middlewareData}) => {
21            Object.assign(tooltip.style, {
22            left: `${x}px`,
23            top: `${y}px`,
24            });
25
26            // Accessing the data
27            const {x: arrowX, y: arrowY} = middlewareData.arrow;
28
29            const staticSide = {
30            top: 'bottom',
31            right: 'left',
32            bottom: 'top',
33            left: 'right',
34            }[placement.split('-')[0]];
35
36            Object.assign(arrowElement.style, {
37            left: arrowX != null ? `${arrowX}px` : '',
38            top: arrowY != null ? `${arrowY}px` : '',
39            right: '',
40            bottom: '',
41            [staticSide]: '-4px',
42            });
43        });
44    }
45
46    function hideTooltip(tooltip) {
47        tooltip.style.display = '';
48    }
49
50    function toggleTooltip(button, tooltip, arrowElement) {
51        if (tooltip.style.display == 'block') {
52            tooltip.style.display = 'none';
53        } else {
54            tooltip.style.display = 'block';
55            update(button, tooltip, arrowElement);
56        }
57    }
58
59    const divs = document.querySelectorAll(".info-button");
60
61    for (var i = 0; i < divs.length; i++) {
62        const button = divs[i].querySelector(".info-button-tooltip-button");
63        const tooltip = divs[i].querySelector(".info-button-tooltip");
64        const arrowElement = divs[i].querySelector(".info-button-arrow");
65
66        button.addEventListener('click', function() {toggleTooltip(button, tooltip, arrowElement);});
67        button.addEventListener('blur', function() {hideTooltip(tooltip);});
68    }
69
70})(document);