From d1dd4bd3d8f302778d211f943b6e5d2ebea03b0f Mon Sep 17 00:00:00 2001
From: wmwragg <wm.wragg@gmail.com>
Date: Sat, 3 Sep 2016 13:57:49 +0100
Subject: [PATCH] Updated tooltip styling to be better inline with the design

---
 src/components/structures/BottomLeftMenu.js   |  2 +-
 src/components/views/rooms/RoomTooltip.js     |  4 ++--
 .../vector-web/views/rooms/RoomTooltip.css    | 22 ++++++++++++++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index b8ee15cdf1..6858a47dfb 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -77,7 +77,7 @@ module.exports = React.createClass({
 
     // Get the label/tooltip to show
     getLabel: function(label, parent, show) {
-        if (true) {
+        if (show) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
             return <RoomTooltip label={label} parent={parent} left={6} top={this.props.collapsed ? 3 : null} />;
         }
diff --git a/src/components/views/rooms/RoomTooltip.js b/src/components/views/rooms/RoomTooltip.js
index 49a1a7ddf5..327e4acf24 100644
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -103,8 +103,8 @@ module.exports = React.createClass({
 
             var tooltip = (
                 <div className="mx_RoomTooltip" style={style} >
-                     <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
-                     { label }
+                    <div className="mx_RoomTooltip_chevron"></div>
+                    { label }
                 </div>
             );
 
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 bd98ac08d2..5bb5f21a8d 100644
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@@ -16,15 +16,31 @@ limitations under the License.
 
 .mx_RoomTooltip_chevron {
     position: absolute;
-    left: -9px;
+    left: -8px;
     top: 4px;
-    pointer-events: none;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-bottom: 8px solid transparent;
+}
+
+.mx_RoomTooltip_chevron:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid #fff;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    left: 1px;
 }
 
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid #a4a4a4;
+    border: 1px solid rgba(187, 187, 187, 0.5);
     border-radius: 5px;
     background-color: #fff;
     z-index: 2000;