From d3d2212a0fc5e3cdbbe003c20c4ffca3caab3cf9 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 18 May 2021 14:23:46 +0100
Subject: [PATCH] Start tab title tooltips on mousemove

By changing to `mousemove` to start the tab title tooltip, the behavior matches
applications like Firefox more closely: you can always get the latest tooltip
back after changing state by nudging the mouse (without having to exit and
re-enter anything).
---
 chrome/content/zotero/components/tabBar.jsx | 24 +++++++++++++++++----
 chrome/content/zotero/tabs.js               |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx
index 12bfe76bbe..1c1eeff13f 100644
--- a/chrome/content/zotero/components/tabBar.jsx
+++ b/chrome/content/zotero/components/tabBar.jsx
@@ -100,15 +100,26 @@ const TabBar = forwardRef(function (props, ref) {
 		props.onTabClose(id);
 		event.stopPropagation();
 	}
+	
+	function handleTabMouseMove(title) {
+		// Fix `title` not working for HTML-in-XUL. Using `mousemove` ensures we restart the tooltip
+		// after just a small movement even when the active tab has changed under the cursor, which
+		// matches behavior in Firefox.
+		window.Zotero_Tooltip.start(title);
+	}
+	
+	function handleTabBarMouseOut() {
+		// Hide any possibly open `title` tooltips when mousing out of any tab or the tab bar as a
+		// whole. `mouseout` bubbles up from element you moved out of, so it covers both cases.
+		window.Zotero_Tooltip.stop();
+	}
 
 	function renderTab({ id, title, selected }, index) {
 		return (
 			<div
 				key={id}
 				className={cx('tab', { selected })}
-				/* Fix 'title' not working for HTML-in-XUL */
-				onMouseOver={() => window.Zotero_Tooltip.start(title)}
-				onMouseOut={() => window.Zotero_Tooltip.stop()}
+				onMouseMove={() => handleTabMouseMove(title)}
 				onMouseDown={(event) => handleTabMouseDown(event, id, index)}
 			>
 				<div className="tab-name">{title}</div>
@@ -123,7 +134,12 @@ const TabBar = forwardRef(function (props, ref) {
 	}
 
 	return (
-		<div className="tabs" ref={tabsRef} onMouseMove={handleTabBarMouseMove}>
+		<div
+			ref={tabsRef}
+			className="tabs"
+			onMouseMove={handleTabBarMouseMove}
+			onMouseOut={handleTabBarMouseOut}
+		>
 			{tabs.map((tab, index) => renderTab(tab, index))}
 		</div>
 	);
diff --git a/chrome/content/zotero/tabs.js b/chrome/content/zotero/tabs.js
index 84b931f697..1251df334c 100644
--- a/chrome/content/zotero/tabs.js
+++ b/chrome/content/zotero/tabs.js
@@ -66,7 +66,7 @@ var Zotero_Tabs = new function () {
 		var { tab } = this._getTab(this._selectedID);
 		document.title = (tab.title.length ? tab.title + ' - ' : '') + 'Zotero';
 		this._updateTabBar();
-		// Hide any tab title tooltips that might be open
+		// Hide any tab `title` tooltips that might be open
 		window.Zotero_Tooltip.stop();
 	};