feat: create tooltip when hovering over avatar

src/web-components/dropdown/index.style.ts

@@ -15,6 +15,7 @@ export const dropdownStyle = css`
 
   .dropdown-list {
     position: relative;
+    z-index: 20;
   }
 
   .header {
@@ -141,11 +142,77 @@ export const dropdownStyle = css`
     white-space: nowrap;
   }
 
+  .superviz-who-is-online__tooltip {
+    background-color: rgb(var(--sv-gray-600));
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    position: absolute;
+    top: 52px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    border-radius: 2px;
+    cursor: default;
+    display: none;
+    transition: opacity 0.2s ease-in-out display 0s;
+  }
+
+  .tooltip-left {
+    left: 29px;
+    top: 60px;
+    z-index: 10;
+  }
+
+  .superviz-who-is-online__tooltip-arrow {
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: rotate(45deg) translateX(-50%);
+    background-color: rgb(var(--sv-gray-600));
+    border-top-left-radius: 3px;
+  }
+
+  .dropdown-content:hover + .superviz-who-is-online__tooltip {
+    opacity: 1;
+    display: block;
+  }
+
+  .tooltip-name,
+  .tooltip-action {
+    margin: 0;
+    font-family: roboto;
+    white-space: nowrap;
+  }
+
+  .tooltip-name {
+    color: white;
+    font-size: 14px;
+  }
+
+  .tooltip-action {
+    color: rgb(var(--sv-gray-400));
+    font-size: 12px;
+  }
+
   @media (max-width: 780px) {
     .menu--top-left,
     .menu--top-center,
     .menu--top-right {
       bottom: 36px;
     }
+
+    .superviz-who-is-online__tooltip {
+      top: 44px;
+    }
+
+    .tooltip-left {
+      top: 52px;
+      left: 25px;
+    }
   }
 `;

src/web-components/dropdown/index.ts

@@ -24,10 +24,12 @@ export class Dropdown extends WebComponentsBaseElement {
   declare active: string | object;
   declare icons?: string[];
   declare name?: string;
+  declare onHoverData: { name: string; action: string };
   private dropdownContent: HTMLElement;
   private originalPosition: Positions;
   private menu: HTMLElement = undefined;
   private host: HTMLElement;
+  declare tooltipOnLeft: boolean;
 
   static properties = {
     open: { type: Boolean },
@@ -40,6 +42,8 @@ export class Dropdown extends WebComponentsBaseElement {
     active: { type: [String, Object] },
     icons: { type: Array },
     name: { type: String },
+    onHoverData: { type: Object },
+    tooltipOnLeft: { type: Boolean },
   };
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
@@ -373,6 +377,21 @@ export class Dropdown extends WebComponentsBaseElement {
     setTimeout(() => this.adjustPosition());
   }
 
+  private onHover() {
+    if (!this.onHoverData?.name) return html``;
+
+    const classList = {
+      'superviz-who-is-online__tooltip': true,
+      'tooltip-left': this.tooltipOnLeft,
+    };
+
+    return html` <div class=${classMap(classList)}>
+      <p class="tooltip-name">${this.onHoverData.name}</p>
+      <p class="tooltip-action">${this.onHoverData.action}</p>
+      <div class="superviz-who-is-online__tooltip-arrow"></div>
+    </div>`;
+  }
+
   protected render() {
     const menuClasses = {
       menu: true,
@@ -409,6 +428,7 @@ export class Dropdown extends WebComponentsBaseElement {
         <div class="dropdown-content" @click=${this.toggle}>
           <slot name="dropdown"></slot>
         </div>
+        ${this.onHover()}
       </div>
       <div class="dropdown-list">
         <div class=${classMap(menuClasses)}>

src/web-components/who-is-online/components/dropdown.ts

@@ -160,6 +160,8 @@ export class WhoIsOnlineDropdown extends WebComponentsBaseElement {
         @selected=${this.close}
         icons="${JSON.stringify(icons)}"
         ?disabled=${disableDropdown}
+        onHoverData=${JSON.stringify({ name, action: 'Click to follow' })}
+        ?tooltipOnLeft=${true}
         >
         <div 
           class=${classMap(contentClasses)} 

src/web-components/who-is-online/who-is-online.ts

@@ -317,6 +317,7 @@ export class WhoIsOnline extends WebComponentsBaseElement {
               icons="${JSON.stringify(icons)}"
               name="${participantName}"
               ?disabled=${disableDropdown}
+              onHoverData=${JSON.stringify({ name, action: isLocal ? 'You' : 'Click to follow' })}
             >
               <div slot="dropdown" class=${classMap(classList)} style="--border-color: ${color}">
                 ${this.getAvatar(participant)}