migrate ui library

lib/ui/tooltip.js

@@ -0,0 +1,58 @@
+function setTooltip(container, content) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tooltip-wrapper tooltip-color';
+    wrapper.style.visibility = 'hidden';
+    wrapper.style.opacity = 0;
+    const pointer = document.createElement('div');
+    pointer.className = 'tooltip-pointer tooltip-color';
+    const curtain = document.createElement('div');
+    curtain.className = 'tooltip-curtain tooltip-color';
+    wrapper.append(pointer, curtain);
+
+    const cnt = document.createElement('div');
+    cnt.className = 'tooltip-content';
+    if (content instanceof HTMLElement) {
+        cnt.appendChild(content);
+    } else {
+        cnt.innerText = content;
+    }
+    wrapper.appendChild(cnt);
+    container.insertAdjacentElement('afterend', wrapper);
+
+    let tid;
+    container.addEventListener('mouseenter', () => {
+        tid && clearTimeout(tid);
+        tid = setTimeout(() => {
+            const left = container.offsetLeft + container.offsetWidth / 2 - wrapper.offsetWidth / 2;
+            const top = container.offsetTop - wrapper.offsetHeight - 14;
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            wrapper.style.visibility = 'visible';
+            wrapper.style.opacity = 1;
+        }, 100);
+    });
+    container.addEventListener('mouseleave', () => {
+        tid && clearTimeout(tid);
+        tid = setTimeout(() => {
+            wrapper.style.visibility = 'hidden';
+            wrapper.style.opacity = 0;
+        }, 300);
+    });
+}
+
+function resolveTooltip(container) {
+    const tips = container.querySelectorAll('[title]');
+    for (let tip of tips) {
+        const title = tip.getAttribute('title');
+        if (title != null) {
+            tip.removeAttribute('title');
+            setTooltip(tip, title);
+        }
+    }
+    return container;
+}
+
+export {
+    setTooltip,
+    resolveTooltip
+}