zulip/zulip

emojis: Add tippy tooltips to show larger version of emoji

Open

#35.170 geöffnet am 8. Juli 2025

Auf GitHub ansehen
 (15 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)Python (19.672 Stars) (7.339 Forks)batch import
accessibilityarea: emojiarea: message feed (display)area: popovers and tooltipsdesignhelp wanted

Beschreibung

Some emoji have fine detail that would be helpful to show closer up. We should improve emoji tooltips to:

  1. Use Tippy tooltips (currently some do and some don't).
  2. Show a larger version of the emoji image followed by the title. We can experiment with emoji size and text placement.

We should try using INSTANT_HOVER_DELAY.

Locations where we should do this:

  • Message feed content.
  • Compose box preview.
  • Status emoji.

We'll skip reactions, at least initially, as there's other info to communicate there.

See #feedback > emojis are extremely small @ 💬 for more context.

Contributor Guide

Tech Stack
javascripttypescriptreact
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
half day
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
active
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Understanding of React componentsFamiliarity with Tippy.js
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60
Research-Richtung
Investigate the existing tooltip implementation in the Zulip web app. Identify files related to emoji rendering in message feed, compose box preview, and status emoji. Look for existing uses of Tippy.js and the INSTANT HOVER DELAY constant. Review the linked feedback thread for additional context. Then implement changes to show larger emoji tooltips using Tippy in the specified locations.