From 90d7e82399037320fe1fe13e58046d800fcedeb5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 27 Mar 2019 17:46:34 -0600
Subject: [PATCH] Use custom tooltips on breadcrumb icons

Fixes https://github.com/vector-im/riot-web/issues/9303

We have to track our own onHover for this, and out of safety we ensure that exactly 1 room is hovered at a time.
---
 src/components/views/rooms/RoomBreadcrumbs.js | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index d661d439bf..cefd278399 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -21,6 +21,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import AccessibleButton from '../elements/AccessibleButton';
 import RoomAvatar from '../avatars/RoomAvatar';
 import classNames from 'classnames';
+import sdk from "../../../index";
 
 const MAX_ROOMS = 20;
 
@@ -83,7 +84,24 @@ export default class RoomBreadcrumbs extends React.Component {
         dis.dispatch({action: "view_room", room_id: room.roomId});
     }
 
+    _onMouseEnter(room) {
+        this._onHover(room);
+    }
+
+    _onMouseLeave(room) {
+        this._onHover(null); // clear hover states
+    }
+
+    _onHover(room) {
+        const rooms = this.state.rooms.slice();
+        for (const r of rooms) {
+            r.hover = room && r.room.roomId === room.roomId;
+        }
+        this.setState({rooms});
+    }
+
     render() {
+        const Tooltip = sdk.getComponent('elements.Tooltip');
         // check for collapsed here and
         // not at parent so we keep
         // rooms in our state
@@ -92,15 +110,23 @@ export default class RoomBreadcrumbs extends React.Component {
             return null;
         }
         const rooms = this.state.rooms;
-        const avatars = rooms.map(({room, animated}, i) => {
+        const avatars = rooms.map(({room, animated, hover}, i) => {
             const isFirst = i === 0;
             const classes = classNames({
                 "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
                 "mx_RoomBreadcrumbs_animate": isFirst,
             });
+
+            let tooltip = null;
+            if (hover) {
+                tooltip = <Tooltip label={room.name} />;
+            }
+
             return (
-                <AccessibleButton className={classes} key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>
+                <AccessibleButton className={classes} key={room.roomId} onClick={() => this._viewRoom(room)}
+                    onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
                     <RoomAvatar room={room} width={32} height={32} />
+                    {tooltip}
                 </AccessibleButton>
             );
         });