[+] Tooltip

AquaNet/src/app.sass

@@ -245,3 +245,12 @@ nav
     display: none
   -ms-overflow-style: none
   scrollbar-width: none
+
+
+.aqua-tooltip
+  box-shadow: 0 0 5px 0 $c-shadow
+  border-radius: $border-radius
+  position: absolute
+  padding: 4px 8px
+  background: $ov-lighter
+  backdrop-filter: blur(5px)

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) =>
+    [ CalTooltip, {
-      `${v ?? 'No'} songs played on ${d.format('MMMM D, YYYY')}` }]
+      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);
+    }
+  }
+}

AquaNet/src/pages/UserHome.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { CHARTJS_OPT, coverNotFound, pfpNotFound, registerChart, renderCal, title } from "../libs/ui";
+  import { CHARTJS_OPT, coverNotFound, pfpNotFound, registerChart, renderCal, title, tooltip } from "../libs/ui";
   import type { GenericGamePlaylog, GenericGameSummary, MusicMeta, TrendEntry } from "../libs/generalTypes";
   import {DATA_HOST} from "../libs/config";
   import 'cal-heatmap/cal-heatmap.css';
@@ -58,7 +58,8 @@
       <div class="name-box">
         <h2>{d.user.name}</h2>
         <span class="setting-icon clickable" on:click={() => editingProfile = true}
-              on:keydown={e => e.key === "Enter" && (editingProfile = true)} tabindex="0" role="button">
+              on:keydown={e => e.key === "Enter" && (editingProfile = true)} tabindex="0" role="button"
+              use:tooltip={"Settings"}>
           <Icon icon="eos-icons:rotating-gear"/>
         </span>
       </div>

AquaNet/src/vars.sass

@@ -8,6 +8,8 @@ $c-shadow: rgba(0, 0, 0, 0.1)
 
 $ov-light: rgba(white, 0.04)
 $ov-lighter: rgba(white, 0.08)
+$ov-dark: rgba(black, 0.04)
+$ov-darker: rgba(black, 0.08)
 
 $nav-height: 4rem
 $w-mobile: 560px