paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-12 01:47:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

tooltips: Group tooltips for a smooth transition.

Browse Source 
This commit introduces the use of createSingleton from the Tippy.js
library to group the tooltips of compose box formatting buttons. The
main benefit is that the hover delay only applies when you move the
cursor into the group for the first time — after that, tooltips show up
instantly as you move between buttons. It makes the whole experience
feel a lot smoother.

We store the singleton instance in a variable to avoid creating multiple
instances unnecessarily. Before initializing a new singleton, we destroy
the previous one to prevent memory leaks and ensure correct behavior.

Previously, each formatting button had its own independent tooltip with
separate delays, which made the experience feel sluggish and disjointed
when hovering across buttons.

Now, by sharing a delay timer across the grouped tooltips, the
transition feels more natural.

Fixes: #24825.

Co-authored-by: Sayam Samal <sayam@zulip.com>
This commit is contained in:
Maneesh Shukla
2025-06-03 18:37:38 +05:30
committed by Tim Abbott
parent 48d2ee2684
commit 0eea85446b
5 changed files with 87 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
web/src/compose_tooltips.ts
View File

@@ -14,10 +14,77 @@ import {pick_empty_narrow_banner} from "./narrow_banner.ts";
import * as narrow_state from "./narrow_state.ts";
import * as popover_menus from "./popover_menus.ts";
import {realm} from "./state_data.ts";
import {EXTRA_LONG_HOVER_DELAY, INSTANT_HOVER_DELAY, LONG_HOVER_DELAY} from "./tippyjs.ts";
import {
EXTRA_LONG_HOVER_DELAY,
INSTANT_HOVER_DELAY,
LONG_HOVER_DELAY,
SINGLETON_INSTANT_HOVER_DELAY,
SINGLETON_LONG_HOVER_DELAY,
get_tooltip_content,
} from "./tippyjs.ts";
import {parse_html} from "./ui_util.ts";
import {user_settings} from "./user_settings.ts";
type SingletonContext = "compose" | `edit_message:${string}`;
type SingletonTooltips = {
tooltip_instances: tippy.Instance[] | null;
singleton_instance: tippy.CreateSingletonInstance | null;
};
const compose_button_singleton_context_map = new Map<SingletonContext, SingletonTooltips>();
// Ensure proper teardown of singleton instances, especially for "Save/Cancel" actions or when handling edit window time limits.
// Reference: http://atomiks.github.io/tippyjs/v6/addons/#destroy
export function clean_up_compose_singleton_tooltip(context: SingletonContext): void {
const singleton_tooltips = compose_button_singleton_context_map.get(context);
if (singleton_tooltips) {
singleton_tooltips.singleton_instance?.destroy();
if (singleton_tooltips.tooltip_instances) {
for (const tippy_instance of singleton_tooltips.tooltip_instances) {
if (!tippy_instance.state.isDestroyed) {
tippy_instance.destroy();
}
}
}
compose_button_singleton_context_map.delete(context);
}
}
export function initialize_compose_tooltips(context: SingletonContext, selector: string): void {
// Clean up existing instances first
clean_up_compose_singleton_tooltip(context);
const tooltip_instances = tippy.default(selector, {
trigger: "mouseenter",
appendTo: () => document.body,
placement: "top",
});
const singleton_instance = tippy.createSingleton(tooltip_instances, {
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
onTrigger(instance, event) {
const currentTarget = event.currentTarget;
if (currentTarget instanceof HTMLElement) {
const content = get_tooltip_content(currentTarget);
if (content) {
instance.setContent(content);
}
if (currentTarget.classList?.contains("disabled-on-hover")) {
instance.setProps({delay: SINGLETON_INSTANT_HOVER_DELAY});
} else {
instance.setProps({delay: SINGLETON_LONG_HOVER_DELAY});
}
}
},
});
compose_button_singleton_context_map.set(context, {
tooltip_instances,
singleton_instance,
});
}
export function initialize(): void {
tippy.delegate("body", {
target: [
@@ -132,40 +199,6 @@ export function initialize(): void {
},
});
tippy.delegate("body", {
// Only display Tippy content on classes accompanied by a `data-` attribute.
target: `
.compose_control_button[data-tooltip-template-id],
.compose_control_button[data-tippy-content],
.compose_control_button_container
`,
// Add some additional delay when they open
// so that regular users don't have to see
// them unless they want to.
delay: LONG_HOVER_DELAY,
// By default, tippyjs uses a trigger value of "mouseenter focus",
// which means the tooltips can appear either when the element is
// hovered over or when it receives focus (e.g. by being clicked).
// However, we only want the tooltips to appear on hover, not on click.
// Therefore, we need to remove the "focus" trigger from the buttons,
// so that the tooltips don't appear when the buttons are clicked.
trigger: "mouseenter",
// This ensures that the upload files tooltip
// doesn't hide behind the left sidebar.
appendTo: () => document.body,
// If the button is `.disabled-on-hover`, then we want to show the
// tooltip instantly, to make it clear to the user that the button
// is disabled, and why.
onTrigger(instance, event) {
assert(event.currentTarget instanceof HTMLElement);
if (event.currentTarget.classList.contains("disabled-on-hover")) {
instance.setProps({delay: INSTANT_HOVER_DELAY});
} else {
instance.setProps({delay: LONG_HOVER_DELAY});
}
},
});
tippy.delegate("body", {
target: ".send-control-button",
delay: LONG_HOVER_DELAY,