[+] Tooltip

AquaNet/src/libs/ui.ts

@@ -1,12 +1,14 @@
 import {
+  CategoryScale,
   Chart as ChartJS,
+  type ChartOptions,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeScale,
   Title,
   Tooltip,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  CategoryScale, TimeScale, type ChartOptions, type LineOptions,
 } from 'chart.js'
 import moment from 'moment/moment'
 // @ts-expect-error Cal-heatmap does not have proper types
@@ -32,7 +34,7 @@ export function registerChart() {
   )
 }
 
-export function renderCal(el: HTMLElement, d: {date: any, value: any}[]): Promise<any> {
+export function renderCal(el: HTMLElement, d: { date: any, value: any }[]): Promise<any> {
   const cal = new CalHeatmap()
   return cal.paint({
     itemSelector: el,
@@ -56,8 +58,10 @@ export function renderCal(el: HTMLElement, d: {date: any, value: any}[]): Promis
     date: { start: moment().subtract(1, 'year').add(1, 'month').toDate() },
     theme: 'dark',
   }, [
-    [ CalTooltip, { text: (_: Date, v: number, d: any) =>
-      `${v ?? 'No'} songs played on ${d.format('MMMM D, YYYY')}` }]
+    [ CalTooltip, {
+      text: (_: Date, v: number, d: any) =>
+        `${v ?? 'No'} songs played on ${d.format('MMMM D, YYYY')}`
+    } ]
   ])
 }
 
@@ -101,3 +105,50 @@ export const CHARTJS_OPT: ChartOptions<'line'> = {
 
 export const pfpNotFound = (e: Event) => (e.target as HTMLImageElement).src = DEFAULT_PFP
 export const coverNotFound = (e: Event) => (e.target as HTMLImageElement).src = "/assets/imgs/no_cover.jpg"
+
+
+/**
+ * use:tooltip
+ */
+export function tooltip(element: HTMLElement, params: { text: string } | string) {
+  // Create div if not exists
+  if (!document.querySelector('.aqua-tooltip')) {
+    const div = document.createElement('div')
+    div.classList.add('aqua-tooltip')
+    document.body.appendChild(div)
+  }
+
+  let isFocus = false
+  let div: HTMLDivElement = document.querySelector('.aqua-tooltip')!
+  const p = typeof params === 'string' ? { text: params } : params
+
+  function updatePosition(event: MouseEvent) {
+    div.style.top = `${event.pageY + 10}px`;
+    div.style.left = `${event.pageX - div.clientWidth / 2 + 5}px`;
+  }
+
+  function mouseOver(event: MouseEvent) {
+    if (isFocus) return
+    div.textContent = p.text;
+    div.style.display = ''
+    updatePosition(event);
+    isFocus = true;
+  }
+
+  function mouseLeave() {
+    isFocus = false
+    div.style.display = 'none'
+  }
+
+  element.addEventListener('mouseover', mouseOver);
+  element.addEventListener('mouseleave', mouseLeave);
+  element.addEventListener('mousemove', updatePosition);
+
+  return {
+    destroy() {
+      element.removeEventListener('mouseover', mouseOver);
+      element.removeEventListener('mouseleave', mouseLeave);
+      element.removeEventListener('mousemove', updatePosition);
+    }
+  }
+}