Added alt-detection. Just need to set up pre-delete for userModel function to remove refrences to itself on alt accounts

www/js/adminPanel.js

@@ -265,6 +265,7 @@ class canopyAdminUtils{
 
 class adminUserList{
     constructor(){
+        this.userNames = document.querySelectorAll(".admin-user-list-name");
         this.rankSelectors = document.querySelectorAll(".admin-user-list-rank-select");
         this.banIcons = document.querySelectorAll(".admin-user-list-ban-icon");
 
@@ -272,13 +273,33 @@ class adminUserList{
     }
 
     setupInput(){
-        this.rankSelectors.forEach((rankSelector)=>{
-            rankSelector.addEventListener("change", this.setRank.bind(this))
-        });
+        for(let userName of this.userNames){
+            //Splice username out of class name
+            const name = userName.id.replace('admin-user-list-name-','');
 
-        this.banIcons.forEach((banIcon) => {
+            //When the mouse starts to hover
+            userName.addEventListener('mouseenter',(event)=>{
+                //Create the tooltip
+                const tooltip = new canopyUXUtils.tooltip(`altList?user=${name}`, true);
+
+                //Do intial mouse move
+                tooltip.moveToMouse(event);
+                
+                //Move the tooltip with the mouse
+                userName.addEventListener('mousemove', tooltip.moveToMouse.bind(tooltip));
+
+                //remove the tooltip on mouseleave
+                userName.addEventListener('mouseleave', tooltip.remove.bind(tooltip));
+            });
+        }
+
+        for(let rankSelector of this.rankSelectors){
+            rankSelector.addEventListener("change", this.setRank.bind(this))
+        }
+
+        for(let banIcon of this.banIcons){
             banIcon.addEventListener("click", this.banPopup.bind(this));
-        })
+        }
     }
 
     async setRank(event){

www/js/profile.js

@@ -160,7 +160,6 @@ class tokeList{
         this.tokeList = document.querySelector('#profile-tokes');
         this.tokeListLabel = document.querySelector('.profile-toke-count');
         this.tokeListToggleIcon = document.querySelector('#toggle-toke-list');
-        console.log(this.tokeList)
 
         this.setupInput();
     }

www/js/utils.js

@@ -98,6 +98,80 @@ class canopyUXUtils{
         return entryRow;
     }
 
+    static tooltip = class{
+        constructor(content, ajaxTooltip = false, cb){
+            //Define non-tooltip node values
+            this.content = content;
+            this.ajaxPopup = ajaxTooltip;
+            this.cb = cb;
+            this.id = Math.random();
+
+            //create and append tooltip
+            this.tooltip = document.createElement('div');
+            this.tooltip.classList.add('tooltip');
+
+            //Display tooltip even if it's not loaded to prevent removal of unloaded tooltips
+            this.displayTooltip();
+
+            //Fill the tooltip
+            this.fillTooltipContent();
+        }
+
+        async fillTooltipContent(){
+            if(this.ajaxPopup){
+                this.tooltip.textContent = "Loading tooltip..."
+                this.tooltip.innerHTML = await utils.ajax.getTooltip(this.content);
+            }else{
+                this.tooltip.innerHTML = this.content;
+            }
+
+            if(this.cb){
+                //Callbacks are kinda out of vogue, but there really isn't a good way to handle asynchronously constructed objects/classes
+                this.cb();
+            }
+        }
+
+        displayTooltip(){
+            document.body.appendChild(this.tooltip);
+        }
+
+        moveToPos(x,y){
+            //If the distance between the left edge of the window - the window width is more than the width of our tooltip
+            if((window.innerWidth - (window.innerWidth - x)) > this.tooltip.getBoundingClientRect().width){
+                //Push it to the right edge of the cursor, where the hard edge typically is
+                this.tooltip.style.right = `${window.innerWidth - x}px`;
+                this.tooltip.style.left = '';
+            //otherwise, if we're close to the edge
+            }else{
+                //push it away from the edge of the screen
+                this.tooltip.style.right = ''
+                this.tooltip.style.left = `${x}px`
+            }
+
+
+            //If the distance between the top edge of the window - the window height is more than the heigt of our tooltip
+            if((window.innerHeight - (window.innerHeight - y)) > this.tooltip.getBoundingClientRect().height){
+                //Push it above the mouse
+                this.tooltip.style.bottom = `${window.innerHeight - y}px`;
+                this.tooltip.style.top = '';
+            //otherwise if we're close to the edge
+            }else{
+                //Push it below the mouse to avoid the top edge of the screen
+                //-50px to account for a normal sized cursor
+                this.tooltip.style.bottom = '';
+                this.tooltip.style.top = `${y+15}px`;
+            }
+
+        }
+
+        moveToMouse(event){
+            this.moveToPos(event.clientX, event.clientY)
+        }
+
+        remove(){
+            this.tooltip.remove();
+        }
+    }
 
     static popup = class{
         constructor(content, ajaxPopup = false, cb){
@@ -468,6 +542,18 @@ class canopyAjaxUtils{
         }
     }
 
+    async getTooltip(tooltip){
+        var response = await fetch(`/tooltip/${tooltip}`,{
+            method: "GET"
+        });
+
+        if(response.status == 200){
+            return (await response.text())
+        }else{
+            utils.ux.displayResponseError(await response.json());
+        }
+    }
+
     async getChanBans(chanName){
         var response = await fetch(`/api/channel/ban?chanName=${chanName}`,{
             method: "GET",