diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts index 1786c8c0b4..8754e59b02 100644 --- a/web/src/buddy_list.ts +++ b/web/src/buddy_list.ts @@ -154,75 +154,79 @@ export class BuddyList extends BuddyListConf { $other_users_container = $(this.other_user_list_selector); initialize_tooltips(): void { - $("#right-sidebar").on("mouseenter", ".buddy-list-heading", (e) => { - e.stopPropagation(); - const $elem = $(e.currentTarget); - let placement: "left" | "auto" = "left"; - if (window.innerWidth < media_breakpoints_num.md) { - // On small devices display tooltips based on available space. - // This will default to "bottom" placement for this tooltip. - placement = "auto"; - } - tippy($elem[0], { - // Because the buddy list subheadings are potential click targets - // for purposes having nothing to do with the subscriber count - // (collapsing/expanding), we delay showing the tooltip until the - // user lingers a bit longer. - delay: INTERACTIVE_HOVER_DELAY, - // Don't show tooltip on touch devices (99% mobile) since touch - // pressing on users in the left or right sidebar leads to narrow - // being changed and the sidebar is hidden. So, there is no user - // displayed to show tooltip for. It is safe to show the tooltip - // on long press but it not worth the inconvenience of having a - // tooltip hanging around on a small mobile screen if anything - // going wrong. - touch: false, - arrow: true, - placement, - showOnCreate: true, - onShow(instance) { - let tooltip_text; - const current_sub = narrow_state.stream_sub(); - const pm_ids_set = narrow_state.pm_ids_set(); - const subscriber_count = total_subscriber_count(current_sub, pm_ids_set); - const elem_id = $elem.attr("id"); - if (elem_id === "buddy-list-users-matching-view-section-heading") { - if (current_sub) { - tooltip_text = $t( - { - defaultMessage: - "{N, plural, one {# subscriber} other {# subscribers}}", - }, - {N: subscriber_count}, - ); + $("#right-sidebar").on( + "mouseenter", + ".buddy-list-heading", + function (this: HTMLElement, e) { + e.stopPropagation(); + const $elem = $(this); + let placement: "left" | "auto" = "left"; + if (window.innerWidth < media_breakpoints_num.md) { + // On small devices display tooltips based on available space. + // This will default to "bottom" placement for this tooltip. + placement = "auto"; + } + tippy($elem[0], { + // Because the buddy list subheadings are potential click targets + // for purposes having nothing to do with the subscriber count + // (collapsing/expanding), we delay showing the tooltip until the + // user lingers a bit longer. + delay: INTERACTIVE_HOVER_DELAY, + // Don't show tooltip on touch devices (99% mobile) since touch + // pressing on users in the left or right sidebar leads to narrow + // being changed and the sidebar is hidden. So, there is no user + // displayed to show tooltip for. It is safe to show the tooltip + // on long press but it not worth the inconvenience of having a + // tooltip hanging around on a small mobile screen if anything + // going wrong. + touch: false, + arrow: true, + placement, + showOnCreate: true, + onShow(instance) { + let tooltip_text; + const current_sub = narrow_state.stream_sub(); + const pm_ids_set = narrow_state.pm_ids_set(); + const subscriber_count = total_subscriber_count(current_sub, pm_ids_set); + const elem_id = $elem.attr("id"); + if (elem_id === "buddy-list-users-matching-view-section-heading") { + if (current_sub) { + tooltip_text = $t( + { + defaultMessage: + "{N, plural, one {# subscriber} other {# subscribers}}", + }, + {N: subscriber_count}, + ); + } else { + tooltip_text = $t( + { + defaultMessage: + "{N, plural, one {# participant} other {# participants}}", + }, + {N: subscriber_count}, + ); + } } else { + const total_user_count = people.get_active_human_count(); + const other_users_count = total_user_count - subscriber_count; tooltip_text = $t( { defaultMessage: - "{N, plural, one {# participant} other {# participants}}", + "{N, plural, one {# other user} other {# other users}}", }, - {N: subscriber_count}, + {N: other_users_count}, ); } - } else { - const total_user_count = people.get_active_human_count(); - const other_users_count = total_user_count - subscriber_count; - tooltip_text = $t( - { - defaultMessage: - "{N, plural, one {# other user} other {# other users}}", - }, - {N: other_users_count}, - ); - } - instance.setContent(tooltip_text); - }, - onHidden(instance) { - instance.destroy(); - }, - appendTo: () => document.body, - }); - }); + instance.setContent(tooltip_text); + }, + onHidden(instance) { + instance.destroy(); + }, + appendTo: () => document.body, + }); + }, + ); } populate(opts: {all_user_ids: number[]}): void {