diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 3615ce8d..27ae2924 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -79,7 +79,7 @@ module.exports = React.createClass({
getLabel: function(label, show) {
if (show) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
- return ;
+ return ;
}
},
diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index 84c2e5d1..bbed5df8 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -24,13 +24,11 @@ module.exports = React.createClass({
displayName: 'RoomTooltip',
propTypes: {
+ // Alllow the tooltip to be styled by the parent element
+ className: React.PropTypes.string.isRequired,
// The tooltip is derived from either the room name or a label
room: React.PropTypes.object,
label: React.PropTypes.string,
-
- // The tooltip position can be tweaked by passing in additional positional information
- top: React.PropTypes.number,
- left: React.PropTypes.number,
},
// Create a wrapper for the tooltip outside the parent and attach it to the body element
@@ -52,8 +50,6 @@ module.exports = React.createClass({
action: 'view_tooltip',
tooltip: null,
parent: null,
- top: null,
- left: null,
});
ReactDOM.unmountComponentAtNode(this.tooltipContainer);
@@ -67,16 +63,12 @@ module.exports = React.createClass({
// positioned, also taking into account any window zoom
// NOTE: The additional 6 pixels for the left position, is to take account of the
// tooltips chevron
- var parent = ReactDOM.findDOMNode(this).parentElement;
+ var parent = ReactDOM.findDOMNode(this);
var style = {};
style.top = parent.getBoundingClientRect().top + window.pageYOffset;
style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
style.display = "block";
- // Add any additional positional tweaks passed in to the tooltip
- if (this.props.top) { style.top += this.props.top; }
- if (this.props.left) { style.left += this.props.left; }
-
var tooltip = (
@@ -92,15 +84,13 @@ module.exports = React.createClass({
action: 'view_tooltip',
tooltip: this.tooltip,
parent: parent,
- top: this.props.top,
- left: this.props.left,
});
},
render: function() {
// Render a placeholder
return (
-
+
);
}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index e4d0304a..0bff0444 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -22,6 +22,14 @@ limitations under the License.
height: 34px;
}
+.mx_RoomTile_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -62px;
+ left: 44px;
+}
+
+
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/LeftPanel.css
index e7834c4a..12991fc2 100644
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@@ -105,3 +105,10 @@ limitations under the License.
.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
float: none;
}
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+ display: inline-block;
+ position: relative;
+ top: -25px;
+ left: 6px;
+}
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
index 5bb5f21a..bf69f9e7 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -50,6 +50,3 @@ limitations under the License.
font-size: 13px;
}
-mx_RoomToolTip_placeholder {
- display: none;
-}