From 78ae1ada3c3b62c8a42f42c66610fe0fb9c08e19 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 6 Mar 2018 14:21:31 +0000
Subject: [PATCH] Fix tooltip vertical positioning.

---
 src/components/views/rooms/RoomTooltip.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index a902045f07..034f80ecee 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -21,6 +21,8 @@ var ReactDOM = require('react-dom');
 var dis = require('matrix-react-sdk/lib/dispatcher');
 import classNames from 'classnames';
 
+const MIN_TOOLTIP_HEIGHT = 25;
+
 module.exports = React.createClass({
     displayName: 'RoomTooltip',
 
@@ -41,6 +43,12 @@ module.exports = React.createClass({
         document.body.appendChild(this.tooltipContainer);
         window.addEventListener('scroll', this._renderTooltip, true);
 
+        const parent = ReactDOM.findDOMNode(this).parentNode;
+        this.state={
+            parent,
+            parentBox: parent.getBoundingClientRect(),
+        };
+
         this._renderTooltip();
     },
 
@@ -61,6 +69,17 @@ module.exports = React.createClass({
         window.removeEventListener('scroll', this._renderTooltip, true);
     },
 
+    _updatePosition(style) {
+        const parentBox = this.state.parent.getBoundingClientRect();
+        let offset = 0;
+        if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
+            offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
+        }
+        style.top = (parentBox.top - 2) + window.pageYOffset + offset;
+        style.left = 6 + parentBox.right + window.pageXOffset;
+        return style;
+    },
+
     _renderTooltip: function() {
         var label = this.props.room ? this.props.room.name : this.props.label;
 
@@ -70,8 +89,8 @@ module.exports = React.createClass({
         // tooltips chevron
         var parent = ReactDOM.findDOMNode(this).parentNode;
         var style = {};
-        style.top = parent.getBoundingClientRect().top + window.pageYOffset;
-        style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
+        console.warn('Bounding box', parent.getBoundingClientRect());
+        style = this._updatePosition(style);
         style.display = "block";
 
         const tooltipClasses = classNames(