@bbki.ng/bb-msg-history 1.0.0 → 2.0.0

package/dist/utils/tooltip.js

@@ -1,17 +1,60 @@
 /**
- * Setup dynamic tooltip positioning
- * Tooltips are positioned fixed to avoid overflow clipping from parent containers
+ * Tooltip utilities for avatar hover effects
+ *
+ * Tooltips use position: fixed to escape overflow clipping from scrollable containers.
+ * Position is calculated on mouseenter and updated on scroll to prevent staleness.
+ */
+/**
+ * Position a tooltip relative to its avatar wrapper
+ * Centers horizontally and places above the avatar
+ */
+function positionTooltip(wrapper, tooltip) {
+    const rect = wrapper.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    // Center horizontally relative to viewport
+    let left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+    // Viewport boundary check - keep tooltip within viewport
+    const padding = 8;
+    left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+    // Position above avatar
+    const top = rect.top - tooltipRect.height - 8;
+    tooltip.style.left = `${left}px`;
+    tooltip.style.top = `${top}px`;
+}
+/**
+ * Setup tooltip positioning for a single avatar wrapper element
+ */
+export function setupTooltipForElement(wrapper) {
+    const tooltip = wrapper.querySelector('.avatar-tooltip');
+    if (!tooltip)
+        return;
+    let scrollContainer = null;
+    const handleMouseEnter = () => {
+        // Find the scrollable container (if any)
+        scrollContainer = wrapper.closest('.history');
+        // Initial position
+        positionTooltip(wrapper, tooltip);
+        // Add scroll listener to update position during scroll
+        if (scrollContainer) {
+            scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+        }
+    };
+    const handleMouseLeave = () => {
+        // Remove scroll listener when not hovering
+        if (scrollContainer) {
+            scrollContainer.removeEventListener('scroll', handleScroll);
+            scrollContainer = null;
+        }
+    };
+    const handleScroll = () => {
+        positionTooltip(wrapper, tooltip);
+    };
+    wrapper.addEventListener('mouseenter', handleMouseEnter);
+    wrapper.addEventListener('mouseleave', handleMouseLeave);
+}
+/**
+ * Setup tooltips for all avatar wrappers in the shadow root
  */
 export function setupTooltips(shadowRoot) {
-    shadowRoot.querySelectorAll('.avatar-wrapper').forEach(wrapper => {
-        wrapper.addEventListener('mouseenter', () => {
-            const tooltip = wrapper.querySelector('.avatar-tooltip');
-            if (!tooltip)
-                return;
-            const rect = wrapper.getBoundingClientRect();
-            const tooltipRect = tooltip.getBoundingClientRect();
-            tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
-            tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
-        });
-    });
+    shadowRoot.querySelectorAll('.avatar-wrapper').forEach(setupTooltipForElement);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/bb-msg-history",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A chat-style message history web component",
   "main": "dist/index.js",
   "type": "module",

package/src/const/styles.ts

@@ -160,7 +160,6 @@ export const MAIN_STYLES = `
     background: #ffffff;
     border-radius: 50%;
     overflow: hidden;
-    cursor: help;
   }
 
   .avatar-wrapper--hidden {
@@ -183,38 +182,6 @@ export const MAIN_STYLES = `
     height: 100%;
   }
 
-  /* Hover tooltip */
-  .avatar-tooltip {
-    position: fixed;
-    padding: 0.25rem 0.5rem;
-    background: ${THEME.gray[800]};
-    color: ${THEME.gray[50]};
-    font-size: 0.75rem;
-    border-radius: 0.25rem;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: 10;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-  }
-
-  .avatar-tooltip::after {
-    content: '';
-    position: absolute;
-    top: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%);
-    border: 4px solid transparent;
-    border-top-color: ${THEME.gray[800]};
-  }
-
-  .avatar-wrapper:hover .avatar-tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-
   /* Message content area */
   .msg-content {
     display: flex;

package/src/core/renderer.ts

@@ -2,9 +2,8 @@ import type { AuthorOptions, Message } from '../types/index.js';
 import type { ProcessedMessage } from './message-processor.js';
 import { EMPTY_STYLES, LOADING_STYLES, MAIN_STYLES } from '../const/styles.js';
 import { resolveAuthorConfig } from '../utils/author-resolver.js';
-import { buildMessageRowHtml, setupTooltipForElement } from '../utils/message-builder.js';
+import { buildMessageRowHtml } from '../utils/message-builder.js';
 import { buildScrollButtonHtml } from '../utils/scroll-button.js';
-import { setupTooltips } from '../utils/tooltip.js';
 
 /**
  * State for incremental message appending
@@ -149,9 +148,6 @@ export class Renderer {
       scrollContainer.scrollTop = scrollContainer.scrollHeight;
     }
 
-    // Re-setup tooltips for new content
-    setupTooltips(this.shadowRoot);
-
     return { wasAtBottom };
   }
 
@@ -205,12 +201,6 @@ export class Renderer {
 
     container.insertAdjacentHTML('beforeend', msgHtml);
 
-    // Setup tooltip for new element
-    const newWrapper = container.lastElementChild?.querySelector('.avatar-wrapper');
-    if (newWrapper) {
-      setupTooltipForElement(newWrapper);
-    }
-
     return {
       success: true,
       lastAuthor: message.author,

package/src/utils/message-builder.ts

@@ -10,7 +10,6 @@ export function buildAvatarHtml(author: string, config: AuthorConfig, showAvatar
     <div class="avatar-wrapper ${showAvatar ? '' : 'avatar-wrapper--hidden'}"
          data-author="${escapeHtml(author)}">
       <div class="avatar">${config.avatar}</div>
-      <div class="avatar-tooltip">${escapeHtml(author)}</div>
     </div>
   `;
 }
@@ -68,17 +67,3 @@ export function buildMessageRowHtml(
     </div>
   `;
 }
-
-/**
- * Setup tooltip for a single avatar wrapper element
- */
-export function setupTooltipForElement(wrapper: Element): void {
-  wrapper.addEventListener('mouseenter', () => {
-    const tooltip = wrapper.querySelector('.avatar-tooltip') as HTMLElement;
-    if (!tooltip) return;
-    const rect = wrapper.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
-    tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
-  });
-}

package/src/utils/tooltip.ts

@@ -1,16 +0,0 @@
-/**
- * Setup dynamic tooltip positioning
- * Tooltips are positioned fixed to avoid overflow clipping from parent containers
- */
-export function setupTooltips(shadowRoot: ShadowRoot): void {
-  shadowRoot.querySelectorAll('.avatar-wrapper').forEach(wrapper => {
-    wrapper.addEventListener('mouseenter', () => {
-      const tooltip = wrapper.querySelector('.avatar-tooltip') as HTMLElement;
-      if (!tooltip) return;
-      const rect = wrapper.getBoundingClientRect();
-      const tooltipRect = tooltip.getBoundingClientRect();
-      tooltip.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
-      tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`;
-    });
-  });
-}