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 = ;
+ }
+
return (
- this._viewRoom(room)}>
+ this._viewRoom(room)}
+ onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
+ {tooltip}
);
});