From 0fdbddf8fd80a532d0fff084eab8098ea282986c Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Tue, 27 Feb 2018 23:07:59 +0000
Subject: [PATCH] Show sticker description as a tooltip, on hover.

---
 src/components/views/messages/MStickerBody.js | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index 95f5d827bb..130b591b56 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -17,22 +17,49 @@ limitations under the License.
 'use strict';
 
 import MImageBody from "./MImageBody";
+import sdk from '../../../index';
 
 export default class MStickerBody extends MImageBody {
     displayName: 'MStickerBody'
 
     constructor(props) {
       super(props);
+
+      this._onMouseEnter = this._onMouseEnter.bind(this);
+      this._onMouseLeave = this._onMouseLeave.bind(this);
+    }
+
+    _onMouseEnter() {
+        this.setState({showTooltip: true});
+    }
+
+    _onMouseLeave() {
+        this.setState({showTooltip: false});
     }
 
     _messageContent(contentUrl, thumbUrl, content) {
+        let tooltip;
+        const tooltipBody = (
+            this.props.mxEvent &&
+            this.props.mxEvent.getContent() &&
+            this.props.mxEvent.getContent().body) ?
+            this.props.mxEvent.getContent().body : null;
+        if (this.state.showTooltip && tooltipBody) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip
+                className="mx_RoleButton_tooltip"
+                label={ tooltipBody } />;
+        }
+
         return (
             <span className="mx_MImageBody" ref="body">
                 <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                     alt={content.body}
                     onLoad={this.props.onWidgetLoad}
-                    onMouseEnter={this.onImageEnter}
-                    onMouseLeave={this.onImageLeave} />
+                    onMouseEnter={this._onMouseEnter}
+                    onMouseLeave={this._onMouseLeave}
+                />
+                { tooltip }
             </span>
         );
     }