diff --git a/Cargo.lock b/Cargo.lock
index 758ab5b..db213f9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3376,6 +3376,7 @@ dependencies = [
  "htmlize",
  "imbl",
  "imghdr",
+ "indexmap",
  "linkify",
  "makepad-widgets",
  "matrix-sdk",
diff --git a/Cargo.toml b/Cargo.toml
index dc492e4..9101e05 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -51,6 +51,7 @@ url = "2.5.0"
 emojis = "0.6.1"
 bytesize = "1.3.0"
 bitflags = "2.6.0"
+indexmap = "2.6.0"
 
 ###################################################################################################
 #### Note: we now enable the usage of `rustls-tls` and the `bundled-sqlite` features in the 2  ####
diff --git a/src/app.rs b/src/app.rs
index 378edbc..6f4b3b0 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -297,6 +297,9 @@ impl MatchEvent for App {
 
 impl AppMain for App {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
+        if let Event::WindowGeomChange(window_geom_change_event) = event {
+            self.app_state.window_geom = Some(window_geom_change_event.new_geom.clone());
+        }
         // Forward events to the MatchEvent trait impl, and then to the App's UI element.
         self.match_event(cx, event);
         let scope = &mut Scope::with_data(&mut self.app_state);
@@ -321,6 +324,8 @@ impl App {
 pub struct AppState {
     pub rooms_panel: RoomsPanelState,
     pub logged_in: bool,
+    /// The current window geometry.
+    pub window_geom: Option<event::WindowGeom>,
 }
 
 #[derive(Default, Debug)]
diff --git a/src/home/event_reaction_list.rs b/src/home/event_reaction_list.rs
new file mode 100644
index 0000000..6fa820f
--- /dev/null
+++ b/src/home/event_reaction_list.rs
@@ -0,0 +1,307 @@
+use crate::sliding_sync::{current_user_id, submit_async_request, MatrixRequest};
+use makepad_widgets::*;
+use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
+use matrix_sdk_ui::timeline::{ReactionInfo, ReactionsByKeyBySender, TimelineEventItemId};
+use crate::profile::user_profile_cache::get_user_profile_and_room_member;
+use crate::home::room_screen::RoomScreenTooltipActions;
+use indexmap::IndexMap;
+
+const TOOLTIP_WIDTH: f64 = 200.0;
+const EMOJI_BORDER_COLOR_INCLUDE_SELF: Vec4 = Vec4 { x: 0.0, y: 0.6, z: 0.47, w: 1.0 }; // DarkGreen
+const EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 { x: 0.714, y: 0.73, z: 0.75, w: 1.0 }; // Grey
+
+const EMOJI_BG_COLOR_INCLUDE_SELF: Vec4 = Vec4 { x: 0.89, y: 0.967, z: 0.929, w: 1.0 }; // LightGreen
+const EMOJI_BG_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 { x: 0.968, y: 0.976, z: 0.98, w: 1.0 }; // LightGrey
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    COLOR_BUTTON_GREY = #B6BABF
+    REACTION_LIST_PADDING_RIGHT = 30.0;
+    pub ReactionList = {{ReactionList}} {
+        width: Fill,
+        height: Fit,
+        flow: RightWrap,
+        margin: {top: 5.0}
+        padding:{
+            right: (REACTION_LIST_PADDING_RIGHT)
+        }
+        item: <Button> {
+            width: Fit,
+            height: Fit,
+            padding: 6,
+            // Use a zero margin on the left because we want the first reaction
+            // to be flush with the left edge of the message text.
+            margin: { top: 3, bottom: 3, left: 0, right: 6 },
+            draw_bg: {
+                instance color: (COLOR_BUTTON_GREY)
+                instance color_hover: #fef65b
+                instance border_width: 1.5
+                instance border_color: #001A11
+                instance radius: 3.0
+                instance hover: 0.0
+                fn get_color(self) -> vec4 {
+                    return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+                }
+
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                    sdf.box(
+                        self.border_width,
+                        self.border_width,
+                        self.rect_size.x - self.border_width * 2.0,
+                        self.rect_size.y - self.border_width * 2.0,
+                        max(1.0, self.radius)
+                    )
+                    sdf.fill_keep(self.get_color())
+                    if self.border_width > 0.0 {
+                        //let stroke_color = mix(self.get_color(), self.border_color, 0.2);
+                        sdf.stroke(self.border_color, self.border_width)
+                    }
+                    return sdf.result;
+                }
+            }
+            draw_text: {
+                text_style: <REGULAR_TEXT>{font_size: 9},
+                color: #000
+                fn get_color(self) -> vec4 {
+                    return self.color;
+                }
+            }
+        }
+    }
+    
+}
+#[derive(Clone, Debug)]
+pub struct ReactionData {
+    /// Refers to an emoji "shortcode" string, which is a temporary hack
+    /// because Makepad does not yet support drawing actual emoji.
+    pub emoji_shortcode: String,
+    /// Original reaction string from the backend before emoji shortcode conversion.
+    pub reaction_raw: String,
+    /// Boolean indicating if the current user is also a sender of this reaction.
+    pub includes_user: bool,
+    /// List of all users who have reacted to the emoji.
+    pub reaction_senders: IndexMap<OwnedUserId, ReactionInfo>,
+    /// The ID of the room that the reaction is for
+    pub room_id: OwnedRoomId
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct ReactionList {
+    #[redraw]
+    #[rust]
+    area: Area,
+    #[live]
+    item: Option<LivePtr>,
+    #[rust]
+    children: Vec<(ButtonRef, ReactionData)>,
+    #[layout]
+    layout: Layout,
+    #[walk]
+    walk: Walk,
+    #[rust]
+    room_id: Option<OwnedRoomId>,
+    #[rust]
+    timeline_event_id: Option<TimelineEventItemId>,
+}
+impl Widget for ReactionList {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, self.layout);
+        self.children.iter_mut().for_each(|(target, _)| {
+            let _ = target.draw(cx, scope); 
+        });
+        cx.end_turtle();
+        DrawStep::done()
+    }
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let uid: WidgetUid = self.widget_uid();
+        let app_state = scope.data.get::<crate::app::AppState>().unwrap();
+        
+        for (widget_ref, reaction_data) in self.children.iter() {
+            match event.hits(cx, widget_ref.area()) {
+                Hit::FingerHoverIn(_) => {
+                    let widget_rect = widget_ref.area().rect(cx);
+                    let mut too_close_to_right = false;
+                    if let Some(window_geom) = &app_state.window_geom {
+                        if (widget_rect.pos.x + widget_rect.size.x) + TOOLTIP_WIDTH > window_geom.inner_size.x {
+                            too_close_to_right = true;
+                        }
+                    }
+                    let tooltip_pos =  if too_close_to_right {
+                        DVec2 {
+                            x: widget_rect.pos.x + (widget_rect.size.x - TOOLTIP_WIDTH),
+                            y: widget_rect.pos.y + widget_rect.size.y
+                        }
+                    } else {
+                        DVec2 {
+                            x: widget_rect.pos.x + widget_rect.size.x,
+                            y: widget_rect.pos.y - 5.0
+                        }
+                    };
+                    let callout_offset = if too_close_to_right {
+                        TOOLTIP_WIDTH - (widget_rect.size.x - 5.0) / 2.0
+                    } else {
+                        10.0
+                    };
+                    cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverInReactionButton {
+                        tooltip_pos, 
+                        tooltip_width: TOOLTIP_WIDTH, 
+                        callout_offset,
+                        reaction_data: reaction_data.clone(),
+                        pointing_up: too_close_to_right,
+                    });
+                    cx.set_cursor(MouseCursor::Hand);
+                    widget_ref.apply_over(cx, live!(draw_bg: {hover: 1.0}));
+                    break;
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+                    widget_ref.apply_over(cx, live!(draw_bg: {hover: 0.0}));
+                    cx.set_cursor(MouseCursor::Arrow);
+                    break;
+                }
+                Hit::FingerDown(_) => {
+                    let Some(room_id) = &self.room_id else { return };
+                    let Some(timeline_event_id) = &self.timeline_event_id else {
+                        return;
+                    };
+                    submit_async_request(MatrixRequest::ToggleReaction {
+                        room_id: room_id.clone(),
+                        timeline_event_id: timeline_event_id.clone(),
+                        reaction: reaction_data.reaction_raw.clone(),
+                    });
+                    // update the reaction button before the timeline is updated
+                    let (bg_color, border_color) = if !reaction_data.includes_user {
+                        (EMOJI_BG_COLOR_INCLUDE_SELF, EMOJI_BORDER_COLOR_INCLUDE_SELF)
+                    } else {
+                        (EMOJI_BG_COLOR_NOT_INCLUDE_SELF, EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF)
+                    };
+                    widget_ref.apply_over(cx, live! {
+                        draw_bg: { color: (bg_color) , border_color: (border_color) }
+                    });
+                    cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+                    cx.set_cursor(MouseCursor::Hand);
+                    break;
+                },
+                Hit::FingerUp(_) => {
+                    cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+                    cx.set_cursor(MouseCursor::Hand);
+                    break;
+                }
+                _ => { }
+            }
+        }
+        if let Event::Scroll(_) = event {
+            cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
+            cx.set_cursor(MouseCursor::Hand);
+        }
+    }    
+}
+
+impl ReactionListRef {
+    /// Set the list of reactions and their counts to display in the ReactionList widget,
+    /// along with the room ID and event ID that these reactions are for.
+    ///
+    /// This will clear any existing list of reactions and replace it with the given one.
+    ///
+    /// The given `event_tl_item_reactions` is a map from each reaction's raw string (including any variant selectors)
+    /// to the list of users who have reacted with that reaction.
+    ///
+    /// The given `room_id` is the ID of the room that these reactions are for.
+    ///
+    /// The given `timeline_event_item_id` is the ID of the event that these reactions are for.
+    /// Required by Matrix API
+    pub fn set_list(
+        &mut self,
+        cx: &mut Cx,
+        event_tl_item_reactions: &ReactionsByKeyBySender,
+        room_id: OwnedRoomId,
+        timeline_event_item_id: TimelineEventItemId,
+        id: usize,
+    ) {
+        const DRAW_ITEM_ID_REACTION: bool = false;
+        
+        let Some(client_user_id) = current_user_id() else { return };
+        let Some(mut inner) = self.borrow_mut() else { return };
+        if event_tl_item_reactions.is_empty() && !DRAW_ITEM_ID_REACTION {
+            inner.children.clear();
+            return;
+        }
+        inner.children.clear(); //Inefficient but we don't want to compare the event_tl_item_reactions
+        for (reaction_raw, reaction_senders) in event_tl_item_reactions.iter() {
+            // Just take the first char of the emoji, which ignores any variant selectors.
+            let reaction_first_char = reaction_raw.chars().next().map(|c| c.to_string());
+            let reaction_str = reaction_first_char.as_deref().unwrap_or(reaction_raw);
+            let mut includes_user: bool = false;
+            let emoji_text = emojis::get(reaction_str)
+                .and_then(|e| e.shortcode())
+                .unwrap_or(reaction_raw);
+            for (sender, _) in reaction_senders.iter() {
+                if sender == &client_user_id {
+                    includes_user = true;
+                }
+                // Cache the reaction sender's user profile so that tooltip will show displayable name 
+                let _ = get_user_profile_and_room_member(cx, sender.clone(), &room_id, true);
+            }
+            let mut emoji_text = emoji_text.to_string();
+
+            // Debugging: draw the item ID as a reaction
+            if DRAW_ITEM_ID_REACTION {
+                emoji_text = format!("{emoji_text}\n ID: {}", id);
+            }
+            let reaction_data = ReactionData {
+                reaction_raw: reaction_raw.to_string(),
+                emoji_shortcode: emoji_text.to_string(),
+                includes_user,
+                reaction_senders: reaction_senders.clone(),
+                room_id: room_id.clone(),
+            };
+            let button = WidgetRef::new_from_ptr(cx, inner.item).as_button();
+            button.set_text(&format!("{}  {}", reaction_data.emoji_shortcode, reaction_senders.len()));
+            let (bg_color, border_color) = if reaction_data.includes_user {
+                (EMOJI_BG_COLOR_INCLUDE_SELF, EMOJI_BORDER_COLOR_INCLUDE_SELF)
+            } else {
+                (EMOJI_BG_COLOR_NOT_INCLUDE_SELF, EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF)
+            };
+            button.apply_over(cx, live! {
+                draw_bg: { color: (bg_color) , border_color: (border_color) }
+            });
+            inner.children.push((button, reaction_data));
+        }
+        inner.room_id = Some(room_id);
+        inner.timeline_event_id = Some(timeline_event_item_id);
+    }
+
+
+    /// Handles hover in action and returns the appropriate `RoomScreenTooltipActions`.
+    /// 
+    /// This function checks if there is a widget action associated with the current
+    /// widget's unique identifier in the provided `actions`. If an action exists,
+    /// it is cast to `RoomScreenTooltipActions` and returned. Otherwise, it returns
+    /// `RoomScreenTooltipActions::None`.
+    ///
+    /// # Arguments
+    ///
+    /// * `actions` - A reference to the `Actions` that may contain widget actions
+    ///   relevant to this widget.
+    pub fn hover_in(&self, actions: &Actions) -> RoomScreenTooltipActions {
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            item.cast()
+        } else {
+            RoomScreenTooltipActions::None
+        }
+    }
+    /// Handles widget actions and returns `true` if the hover out action was found in the provided `actions`.
+    /// Otherwise, returns `false`.
+    pub fn hover_out(&self, actions: &Actions) -> bool {
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            matches!(item.cast(), RoomScreenTooltipActions::HoverOut)
+        } else {
+            false
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 72355bf..ba2d184 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -11,6 +11,7 @@ pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
 pub mod welcome_screen;
+pub mod event_reaction_list;
 pub mod message_context_menu;
 
 pub fn live_design(cx: &mut Cx) {
@@ -25,5 +26,6 @@ pub fn live_design(cx: &mut Cx) {
     spaces_dock::live_design(cx);
     welcome_screen::live_design(cx);
     light_themed_dock::live_design(cx);
+    event_reaction_list::live_design(cx);
     message_context_menu::live_design(cx);
 }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 94136bb..fb223fe 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -16,7 +16,7 @@ use matrix_sdk::{
     }, OwnedServerName
 };
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, Profile, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
 use robius_location::Coordinates;
 
@@ -28,9 +28,10 @@ use crate::{
         avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::enqueue_popup_notification, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{self, get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender}, utils::{self, unix_time_millis_to_datetime, ImageFormat, MediaFormatConst},
 };
+use crate::home::event_reaction_list::ReactionListWidgetRefExt;
 use rangemap::RangeSet;
 
-use super::{loading_modal::{LoadingModalAction, LoadingModalState}, message_context_menu::MessageContextMenuWidgetRefExt};
+use super::{event_reaction_list::ReactionData, loading_modal::{LoadingModalAction, LoadingModalState}, message_context_menu::MessageContextMenuWidgetRefExt};
 
 const GEO_URI_SCHEME: &str = "geo:";
 
@@ -56,6 +57,8 @@ live_design! {
     use crate::shared::jump_to_bottom_button::*;
     use crate::home::loading_modal::*;
     use crate::home::message_context_menu::*;
+    use crate::home::message_context_menu::*;
+    use crate::home::event_reaction_list::*;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
@@ -365,7 +368,7 @@ live_design! {
                 //     margin: {top: 13.0, bottom: 5.0}
                 // }
 
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> { }
             }
 
         }
@@ -398,7 +401,7 @@ live_design! {
                 padding: { left: 10.0 }
 
                 message = <HtmlOrPlaintext> { }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> { }
             }
         }
     }
@@ -410,7 +413,7 @@ live_design! {
             content = {
                 padding: { left: 10.0 }
                 message = <TextOrImage> { }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> { }
             }
         }
     }
@@ -422,7 +425,7 @@ live_design! {
         body = {
             content = {
                 message = <TextOrImage> { }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> { }
             }
         }
     }
@@ -877,6 +880,84 @@ live_design! {
                     message_action_bar = <MessageActionBar> {}
                 }
             }
+            room_screen_tooltip = <Tooltip> {
+                content: <View> {
+                    flow: Overlay
+                    width: Fit
+                    height: Fit
+        
+                    rounded_view = <RoundedView> {
+                        width: Fill,
+                        height: Fit,
+                        
+                        padding: 10,
+        
+                        draw_bg: {
+                            color: #fff,
+                            border_width: 1.0,
+                            border_color: #D0D5DD,
+                            radius: 2.,
+                            instance background_color: (#3b444b),
+                            // Height of isoceles triangle
+                            instance callout_triangle_height: 7.5,
+                            instance callout_offset: 15.0,
+                            instance pointing_up: 0.0,
+                            fn pixel(self) -> vec4 {
+                                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                                let rect_size = self.rect_size;
+                                // Main rounded rectangle
+                                if self.pointing_up >= 0.5 {
+                                    sdf.box(
+                                        // Minus 2.0 to overlap the triangle and rectangle
+                                        self.border_width,
+                                        (self.callout_triangle_height - 2.0) + self.border_width,
+                                        rect_size.x - (self.border_width * 2.0) ,
+                                        rect_size.y - (self.border_width * 2.0) - (self.callout_triangle_height - 2.0),
+                                        max(1.0, self.radius)
+                                    )
+                                    sdf.fill(self.background_color);
+                                    sdf.translate(self.callout_offset - 2.0 * self.callout_triangle_height, 0.0);
+                                     // Draw up-pointed arrow triangle
+                                    sdf.move_to(self.callout_triangle_height * 2.0, self.callout_triangle_height * 1.0);
+                                    sdf.line_to(0.0, self.callout_triangle_height * 1.0);
+                                    sdf.line_to(self.callout_triangle_height, 0.0);
+                                } else {
+                                    sdf.box(
+                                        // Minus 2.0 to overlap the triangle and rectangle
+                                        (self.callout_triangle_height - 2.0) + self.border_width,
+                                        0.0 + self.border_width,
+                                        rect_size.x - (self.border_width * 2.0) - (self.callout_triangle_height - 2.0),
+                                        rect_size.y - (self.border_width * 2.0),
+                                        max(1.0, self.radius)
+                                    )
+                                    sdf.fill(self.background_color);
+                                    sdf.translate(0.5, self.callout_offset);
+                                    // Draw left-pointed arrow triangle
+                                    sdf.move_to(self.callout_triangle_height, 0.0);
+                                    sdf.line_to(self.callout_triangle_height, self.callout_triangle_height * 2.0);
+                                    sdf.line_to(0.5, self.callout_triangle_height);
+                                }
+                                
+                                sdf.close_path();
+                                
+                                sdf.fill((self.background_color));
+                                return sdf.result;
+                            }
+                            
+                        }
+        
+                        tooltip_label = <Label> {
+                            width: Fill,
+                            height: Fit,
+                            draw_text: {
+                                text_style: <THEME_FONT_REGULAR>{font_size: 9},
+                                text_wrap: Word,
+                                color: (COLOR_PRIMARY)
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         animator: {
@@ -942,6 +1023,45 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
+            let tooltip = self.tooltip(id!(room_screen_tooltip));
+            for (_, wr) in portal_list.items_with_actions(actions) {
+                let reaction_list = wr.reaction_list(id!(reaction_list));
+                if let RoomScreenTooltipActions::HoverInReactionButton { 
+                    tooltip_pos, 
+                    tooltip_width, 
+                    callout_offset, 
+                    reaction_data,
+                    pointing_up
+                } = reaction_list.hover_in(actions) {
+                    let tooltip_text_arr: Vec<String> = reaction_data.reaction_senders.iter().map(|(sender, _react_info)| {
+                        user_profile_cache::get_user_profile_and_room_member(cx, sender.clone(), &reaction_data.room_id, true).0
+                            .map(|user_profile| user_profile.displayable_name().to_string())
+                            .unwrap_or(sender.to_string())
+                    }).collect();
+                    let mut tooltip_text = utils::human_readable_list(&tooltip_text_arr);                
+                    tooltip_text.push_str(&format!(" reacted with: {}", reaction_data.emoji_shortcode));
+                    tooltip.show_with_options(cx, tooltip_pos, &tooltip_text);
+                    tooltip.apply_over(cx, live!(
+                        content: {
+                            width: (tooltip_width)
+                            rounded_view = {
+                                draw_bg: {
+                                    callout_offset: (callout_offset)
+                                    pointing_up: (if pointing_up { 1.0 } else { 0.0 })
+                                }
+                                //tooltip_label = {
+                                // content = {
+                                //     width: (tooltip_width)
+                                //     //width: Fit
+                                // }
+                            }
+                        }
+                    ));
+                }
+                if reaction_list.hover_out(actions) {
+                    tooltip.hide(cx);
+                }
+            }
             for action in actions {
                 // Handle actions on a message, e.g., clicking the reply button or clicking the reply preview.
                 match action.as_widget_action().widget_uid_eq(widget_uid).cast() {
@@ -1456,13 +1576,13 @@ impl RoomScreen {
         let top_space = self.view(id!(top_space));
         let jump_to_bottom = self.jump_to_bottom_button(id!(jump_to_bottom));
         let curr_first_id = portal_list.first_id();
+        let ui = self.widget_uid();
         let Some(tl) = self.tl_state.as_mut() else { return };
 
         let mut done_loading = false;
         let mut should_continue_backwards_pagination = false;
         let mut num_updates = 0;
         let mut typing_users = Vec::new();
-
         while let Ok(update) = tl.update_receiver.try_recv() {
             num_updates += 1;
             match update {
@@ -1528,6 +1648,9 @@ impl RoomScreen {
                             tl.prev_first_index = Some(new_item_idx);
                             // Set scrolled_past_read_marker false when we jump to a new event
                             tl.scrolled_past_read_marker = false;
+                            // When the tooltip is up, the timeline may jump. This may take away the hover out event to required to clear the tooltip
+                            cx.widget_action(ui, &Scope::empty().path, RoomScreenTooltipActions::HoverOut);
+
                         }
                     }
                     //
@@ -2198,6 +2321,31 @@ impl RoomScreenRef {
     }
 }
 
+/// Actions for the room screen's tooltip.
+#[derive(Clone, Debug, DefaultNone)]
+pub enum RoomScreenTooltipActions {
+    /// Mouse over event when the mouse is over the reaction button.
+    HoverInReactionButton {
+        tooltip_pos: DVec2,
+        tooltip_width: f64,
+        /// Pointed arrow position relative to the tooltip
+        /// 
+        /// It is calculated from the right corner of tooltip to position arrow
+        /// to point towards the center of the hovered widget.
+        callout_offset: f64,
+        /// Data that is bound together the widget
+        /// 
+        /// Includes the list of users who have reacted to the emoji
+        reaction_data: ReactionData,
+        /// Boolean indicating if the callout should be pointing up.
+        /// 
+        /// If false, it is pointing left
+        pointing_up: bool
+    },
+    /// Mouse out event and clear tooltip
+    HoverOut,
+    None,
+}
 /// A message that is sent from a background async task to a room's timeline view
 /// for the purpose of update the Timeline UI contents or metadata.
 pub enum TimelineUpdate {
@@ -2907,7 +3055,8 @@ fn populate_message_view(
 
     // If we didn't use a cached item, we need to draw all other message content: the reply preview and reactions.
     if !used_cached_item {
-        draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+        item.reaction_list(id!(content.reaction_list))
+            .set_list(cx, event_tl_item.reactions(), room_id.to_owned(), event_tl_item.identifier(), item_id);
         let (is_reply_fully_drawn, replied_to_ev_id) = draw_replied_to_message(
             cx,
             &item.view(id!(replied_to_message)),
@@ -3408,45 +3557,6 @@ fn populate_preview_of_timeline_item(
     widget_out.show_html(html);
 }
 
-/// Draws the reactions beneath the given `message_item`.
-fn draw_reactions(
-    _cx: &mut Cx2d,
-    message_item: &WidgetRef,
-    reactions: &ReactionsByKeyBySender,
-    id: usize,
-) {
-    const DRAW_ITEM_ID_REACTION: bool = false;
-    if reactions.is_empty() && !DRAW_ITEM_ID_REACTION {
-        return;
-    }
-
-    // The message annotations view is invisible by default, so we must set it to visible
-    // now that we know there are reactions to show.
-    message_item
-        .view(id!(content.message_annotations))
-        .set_visible(true);
-
-    let mut label_text = String::new();
-    for (reaction_raw, reaction_senders) in reactions.iter() {
-        // Just take the first char of the emoji, which ignores any variant selectors.
-        let reaction_first_char = reaction_raw.chars().next().map(|c| c.to_string());
-        let reaction_str = reaction_first_char.as_deref().unwrap_or(reaction_raw);
-        let text_to_display = emojis::get(reaction_str)
-            .and_then(|e| e.shortcode())
-            .unwrap_or(reaction_raw);
-        let count = reaction_senders.len();
-        // log!("Found reaction {:?} with count {}", text_to_display, count);
-        label_text = format!("{label_text}<i>:{}:</i> <b>{}</b> ", text_to_display, count);
-    }
-
-    // Debugging: draw the item ID as a reaction
-    if DRAW_ITEM_ID_REACTION {
-        label_text = format!("{label_text}<i>ID: {}</i>", id);
-    }
-
-    let html_reaction_view = message_item.html(id!(message_annotations.html_content));
-    html_reaction_view.set_text(&label_text);
-}
 
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index a2bbb16..5b0344e 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -17,7 +17,7 @@ use matrix_sdk::{
 use matrix_sdk_ui::{
     room_list_service::{self, RoomListLoadingState},
     sync_service::{self, SyncService},
-    timeline::{AnyOtherFullStateEventContent, EventTimelineItem, RepliedToInfo, TimelineDetails, TimelineItem, TimelineItemContent, MembershipChange},
+    timeline::{AnyOtherFullStateEventContent, EventTimelineItem, RepliedToInfo, TimelineDetails, TimelineEventItemId, TimelineItem, TimelineItemContent, MembershipChange},
     Timeline,
 };
 use robius_open::Uri;
@@ -379,6 +379,12 @@ pub enum MatrixRequest {
     /// The response is delivered back to the main UI thread via a `TimelineUpdate::CanUserSendMessage`.
     CheckCanUserSendMessage {
         room_id: OwnedRoomId,
+    },
+    /// Toggles the given reaction to the given event in the given room.
+    ToggleReaction {
+        room_id: OwnedRoomId,
+        timeline_event_id: TimelineEventItemId,
+        reaction: String,
     }
 }
 
@@ -923,6 +929,27 @@ async fn async_worker(
                         error!("Failed to send the result of if user can send message: {e}")
                     }
                 });
+            },
+            MatrixRequest::ToggleReaction { room_id, timeline_event_id, reaction } => {
+                let timeline = {
+                    let all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get(&room_id) else {
+                        log!("BUG: room info not found for send toggle reaction {room_id}");
+                        continue;
+                    };
+                    room_info.timeline.clone()
+                };
+
+                let _toggle_reaction_task = Handle::current().spawn(async move {
+                    log!("Toggle Reaction to room {room_id}: ...");
+                    match timeline.toggle_reaction(&timeline_event_id, &reaction).await {
+                        Ok(_send_handle) => {
+                            SignalToUI::set_ui_signal();
+                            log!("Sent toggle reaction to room {room_id} {reaction}.")
+                        },
+                        Err(_e) => error!("Failed to send toggle reaction to room {room_id} {reaction}; error: {_e:?}"),
+                    }
+                });
             }
         }
     }
diff --git a/src/utils.rs b/src/utils.rs
index 97ef292..ba07018 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -310,7 +310,53 @@ pub fn ends_with_href(text: &str) -> bool {
     substr.trim_end().ends_with("href")
 }
 
-
+/// Converts a list of names into a human-readable string with a 5-name limit.
+///
+/// # Examples
+/// ```
+/// assert_eq!(human_readable_list(&vec!["Alice"]), String::from("Alice"));
+/// assert_eq!(human_readable_list(&vec![String::from("Alice"), String::from("Bob")]), String::from("Alice and Bob"));
+/// assert_eq!(human_readable_list(&vec!["Alice", "Bob", "Charlie"]), String::from("Alice, Bob and Charlie"));
+/// assert_eq!(human_readable_list(&vec!["Alice", "Bob", "Charlie", "Dennis", "Eudora", "Fanny"]), String::from("Alice, Bob, Charlie, Dennis, Eudora and 1 other"));
+/// ```
+pub fn human_readable_list<S>(names: &[S]) -> String
+where
+    S: AsRef<str>
+{
+    const MAX_NAMES: usize = 5;
+    let mut result = String::new();
+    match names.len() {
+        0 => { }
+        1 => {
+            result.push_str(names[0].as_ref());
+        },
+        2 => {
+            result.push_str(names[0].as_ref());
+            result.push_str(" and ");
+            result.push_str(names[1].as_ref());
+        },
+        _ => {
+            let display_count = names.len().min(MAX_NAMES);
+            for (i, name) in names.iter().take(display_count - 1).enumerate() {
+                if i > 0 {
+                    result.push_str(", ");
+                }
+                result.push_str(name.as_ref());
+            }
+            if names.len() > MAX_NAMES {
+                let remaining = names.len() - MAX_NAMES;
+                result.push_str(", ");
+                result.push_str(names[display_count - 1].as_ref());
+                result.push_str(" and ");
+                result.push_str(&format!("{} others", remaining));
+            } else {
+                result.push_str(" and ");
+                result.push_str(names[display_count - 1].as_ref());
+            }
+        }
+    };
+    result
+}
 
 #[cfg(test)]
 mod tests_linkify {