{ hoveredReaction = content; hoveredReactionElement = e.currentTarget; // Calculate tooltip position const rect = e.currentTarget.getBoundingClientRect(); const tooltipWidth = 300; // max-width from CSS const tooltipHeight = 200; // max-height from CSS let left = rect.left; let top = rect.bottom + 5; // Adjust if tooltip would go off right edge if (left + tooltipWidth > window.innerWidth) { left = window.innerWidth - tooltipWidth - 10; } // Adjust if tooltip would go off left edge if (left < 10) { left = 10; } // Adjust if tooltip would go off bottom edge (show above instead) if (top + tooltipHeight > window.innerHeight) { top = rect.top - tooltipHeight - 5; } // Adjust if tooltip would go off top edge if (top < 10) { top = 10; } tooltipPosition = { top, left }; }} onmouseleave={() => { hoveredReaction = null; hoveredReactionElement = null; tooltipPosition = null; }} > {#if content === '+'} {:else if content.startsWith(':') && content.endsWith(':')} {#if hasEmojiUrl(content)} {@const url = getCustomEmojiUrl(content)} {#if url}

{:else} {formatTextEmoji(content)} {/if} {:else} {formatTextEmoji(content)} {/if} {:else} {content} {/if} {count}