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

@@ -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>
             );
         });