From b4b9c7d07244136e12b4e0792a0d602f2ee5e9a8 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 5 Sep 2019 13:22:42 +0200
Subject: [PATCH] Add tooltip for format buttons

---
 .../rooms/_MessageComposerFormatBar.scss      |  6 ++++++
 .../views/rooms/MessageComposerFormatBar.js   | 19 ++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.scss
index 2e74076e2a..c8ca218b13 100644
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.scss
@@ -79,3 +79,9 @@ limitations under the License.
         mask-image: url('$(res)/img/format/code.svg');
     }
 }
+
+.mx_MessageComposerFormatBar_buttonTooltip {
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 600;
+}
diff --git a/src/components/views/rooms/MessageComposerFormatBar.js b/src/components/views/rooms/MessageComposerFormatBar.js
index cc3f341653..154c8b0d31 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.js
+++ b/src/components/views/rooms/MessageComposerFormatBar.js
@@ -17,6 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+
 
 export default class MessageComposerFormatBar extends React.PureComponent {
     static propTypes = {
@@ -67,13 +69,20 @@ class FormatButton extends React.PureComponent {
     }
 
     render() {
+        const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
+        const tooltipContent = (
+            <div className="mx_MessageComposerFormatBar_buttonTooltip">{this.props.label}</div>
+        );
+
         return (
-            <span aria-label={this.props.label}
-               role="button"
-               onClick={this.props.onClick}
-               className={className}>
-            </span>
+            <InteractiveTooltip content={tooltipContent}>
+                <span aria-label={this.props.label}
+                   role="button"
+                   onClick={this.props.onClick}
+                   className={className}>
+                </span>
+            </InteractiveTooltip>
         );
     }
 }