Refactor of the RoomTooltip, so that it is easier to use, and also works with Safari

src/component-index.js

@@ -48,7 +48,6 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen
 module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
 module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
 module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
-module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile');
 module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView');
 module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
 module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');

src/components/structures/BottomLeftMenu.js

@@ -41,12 +41,11 @@ module.exports = React.createClass({
         }
         else if (this.state.hover) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            return <RoomTooltip name={name}/>;
+            return <RoomTooltip name={name} component={this} />;
         }
     },
 
     render: function() {
-        var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
         return (
             <div className="mx_BottomLeftMenu">

src/components/views/rooms/BottomLeftMenuTile.js

@@ -1,57 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'BottomLeftMenuTile',
-
-    getInitialState: function() {
-        return( { hover : false });
-    },
-
-    onMouseEnter: function() {
-        this.setState( { hover : true });
-    },
-
-    onMouseLeave: function() {
-        this.setState( { hover : false });
-    },
-
-    render: function() {
-        var label;
-        if (!this.props.collapsed) {
-            label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
-        }
-        else if (this.state.hover) {
-            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
-        }
-
-        return (
-            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
-                <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="26" height="26"/>
-                </div>
-                { label }
-            </div>
-        );
-    }
-});

src/components/views/rooms/RoomTooltip.js

@@ -24,37 +24,57 @@ var dis = require('matrix-react-sdk/lib/dispatcher');
 module.exports = React.createClass({
     displayName: 'RoomTooltip',
 
+    propTypes: {
+        component: React.PropTypes.object.isRequired,
+        room: React.PropTypes.object,
+        label: React.PropTypes.string,
+    },
+
+    // Create a wrapper for the tooltip outside the main matrix element
     componentDidMount: function() {
-        var tooltip = ReactDOM.findDOMNode(this);
+        this.tooltipContainer = document.createElement("div");
-        if (!this.props.bottom) {
+        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
-            // tell the roomlist about us so it can position us
+        document.body.appendChild(this.tooltipContainer);
-            dis.dispatch({
+
-                action: 'view_tooltip',
+        this._renderTooltip();
-                tooltip: tooltip,
+
-            });
+        // tell the roomlist about us so it can position us
-        }
+        dis.dispatch({
-        else {
+            action: 'view_tooltip',
-            tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
+            tooltip: this.tooltip,
-            tooltip.style.display = "block";
+            parent: this.props.component ? ReactDOM.findDOMNode(this.props.component) : null,
-        }
+        });
     },
 
+    // Remove the wrapper element, as the tooltip has finished using it
     componentWillUnmount: function() {
-        if (!this.props.bottom) {
+        dis.dispatch({
-            dis.dispatch({
+            action: 'view_tooltip',
-                action: 'view_tooltip',
+            tooltip: null,
-                tooltip: null,
+            parent: null,
-            });
+        });
-        }
+
+        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
+        document.body.removeChild(this.tooltipContainer);
     },
 
-    render: function() {
+    _renderTooltip: function() {
         var label = this.props.room ? this.props.room.name : this.props.label;
-        return (
+        var tooltip = (
             <div className="mx_RoomTooltip">
                  <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
                  { label }
             </div>
         );
+
+        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+    },
+
+    render: function() {
+        // Render a placeholder
+        return (
+            <div className="mx_RoomToolTip_placeholder" >
+            </div>
+        );
     }
 });

src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css

@@ -18,6 +18,7 @@ limitations under the License.
     position: absolute;
     left: -9px;
     top: 7px;
+    pointer-events: none;
 }
 
 .mx_RoomTooltip {
@@ -29,4 +30,9 @@ limitations under the License.
     z-index: 2000;
     left: 52px;
     padding: 6px;
+    pointer-events: none;
+}
+
+mx_RoomToolTip_placeholder {
+    display: none;
 }