Social Media Emojis

.emoji {font-size: 2.5rem; text-align: center; padding: 10px; cursor: pointer; border-radius: 12px; transition: all 0.2s; user-select: none;} .emoji:hover {background: #e3f2fd; transform: scale(1.2);} .tab-btn {padding: 10px 16px; border: none; background: #f0f0f0; color: #333; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.3s;} .tab-btn.active, .tab-btn:hover {background: #fc4444; color: white;}const tooltip = document.getElementById(‘copy-tooltip’);function showTooltip(x, y) { tooltip.style.left = (x + 15) + ‘px’; tooltip.style.top = (y + 15) + ‘px’; tooltip.style.opacity = ‘1’; setTimeout(() => tooltip.style.opacity = ‘0’, 2000); }// Reliable copy using textarea + execCommand (works in WordPress) function copyToClipboard(text, event) { const textarea = document.createElement(‘textarea’); textarea.value = text; textarea.style.position = ‘fixed’; textarea.style.opacity = ‘0’; document.body.appendChild(textarea); textarea.select(); document.execCommand(‘copy’); document.body.removeChild(textarea);// Feedback event.target.style.background = ‘#d4edda’; setTimeout(() => event.target.style.background = ”, 300); showTooltip(event.pageX, event.pageY); }document.querySelectorAll(‘.emoji’).forEach(el => { el.addEventListener(‘click’, e => { copyToClipboard(el.textContent.trim(), e); }); });document.addEventListener(‘mousemove’, e => { if (tooltip.style.opacity === ‘1’) { tooltip.style.left = (e.pageX + 15) + ‘px’; tooltip.style.top = (e.pageY + 15) + ‘px’; } });// Search & Tabs (same as before) document.getElementById(’emoji-search’).addEventListener(‘input’, function() { const q = this.value.toLowerCase(); document.querySelectorAll(‘.emoji’).forEach(el => { const title = (el.getAttribute(‘title’) || ”).toLowerCase(); const sym = el.textContent.toLowerCase(); el.style.display = (title.includes(q) || sym.includes(q)) ? ‘block’ : ‘none’; }); });document.querySelectorAll(‘.tab-btn’).forEach(btn => { btn.addEventListener(‘click’, () => { document.querySelectorAll(‘.tab-btn’).forEach(b => b.classList.remove(‘active’)); btn.classList.add(‘active’); const cat = btn.getAttribute(‘data-category’); document.querySelectorAll(‘.emoji’).forEach(el => { el.style.display = (cat === ‘all’ || el.classList.contains(cat)) ? ‘block’ : ‘none’; }); document.getElementById(’emoji-search’).value = ”; }); });