Show reaction title and shortcode on hover

This shows the title and shortcode for the hovered reaction at the bottom of the
tooltip. If nothing is hovered, a blank space is shown for now, but will
eventually become a link to a full emoji picker in future work.

Part of https://github.com/vector-im/riot-web/issues/9753

res/css/views/messages/_ReactionQuickTooltip.scss

@@ -14,7 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ReactionsQuickTooltip {
+.mx_ReactionsQuickTooltip_buttons {
     display: grid;
     grid-template-columns: repeat(4, auto);
 }
+
+.mx_ReactionsQuickTooltip_label {
+    text-align: center;
+}
+
+.mx_ReactionsQuickTooltip_shortcode {
+    padding-left: 6px;
+    opacity: 0.7;
+}

src/components/views/messages/ReactionTooltipButton.js

@@ -57,6 +57,7 @@ export default class ReactionTooltipButton extends React.PureComponent {
         });
 
         return <span className={classes}
+            data-key={content}
             title={this.props.title}
             aria-hidden={true}
             onClick={this.onClick}

src/components/views/messages/ReactionsQuickTooltip.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import { unicodeToShortcode } from '../../../HtmlUtils';
 
 export default class ReactionsQuickTooltip extends React.PureComponent {
     static propTypes = {
@@ -38,6 +39,7 @@ export default class ReactionsQuickTooltip extends React.PureComponent {
         }
 
         this.state = {
+            hoveredItem: null,
             myReactions: this.getMyReactions(),
         };
     }
@@ -87,12 +89,22 @@ export default class ReactionsQuickTooltip extends React.PureComponent {
         return [...myReactions.values()];
     }
 
-    render() {
+    onMouseOver = (ev) => {
-        const { mxEvent } = this.props;
+        const { key } = ev.target.dataset;
-        const { myReactions } = this.state;
+        const item = this.items.find(({ content }) => content === key);
-        const ReactionTooltipButton = sdk.getComponent('messages.ReactionTooltipButton');
+        this.setState({
+            hoveredItem: item,
+        });
+    }
 
-        const items = [
+    onMouseOut = (ev) => {
+        this.setState({
+            hoveredItem: null,
+        });
+    }
+
+    get items() {
+        return [
             {
                 content: "👍",
                 title: _t("Agree"),
@@ -126,8 +138,14 @@ export default class ReactionsQuickTooltip extends React.PureComponent {
                 title: _t("Eyes"),
             },
         ];
+    }
 
-        const buttons = items.map(({ content, title }) => {
+    render() {
+        const { mxEvent } = this.props;
+        const { myReactions, hoveredItem } = this.state;
+        const ReactionTooltipButton = sdk.getComponent('messages.ReactionTooltipButton');
+
+        const buttons = this.items.map(({ content, title }) => {
             const myReactionEvent = myReactions && myReactions.find(mxEvent => {
                 if (mxEvent.isRedacted()) {
                     return false;
@@ -144,8 +162,34 @@ export default class ReactionsQuickTooltip extends React.PureComponent {
             />;
         });
 
-        return <div className="mx_ReactionsQuickTooltip">
+        let label = " "; // non-breaking space to keep layout the same when empty
-            {buttons}
+        if (hoveredItem) {
+            const { content, title } = hoveredItem;
+
+            let shortcodeLabel;
+            const shortcode = unicodeToShortcode(content);
+            if (shortcode) {
+                shortcodeLabel = <span className="mx_ReactionsQuickTooltip_shortcode">
+                    {shortcode}
+                </span>;
+            }
+
+            label = <div className="mx_ReactionsQuickTooltip_label">
+                <span className="mx_ReactionsQuickTooltip_title">
+                    {title}
+                </span>
+                {shortcodeLabel}
+            </div>;
+        }
+
+        return <div className="mx_ReactionsQuickTooltip"
+            onMouseOver={this.onMouseOver}
+            onMouseOut={this.onMouseOut}
+        >
+            <div className="mx_ReactionsQuickTooltip_buttons">
+                {buttons}
+            </div>
+            {label}
         </div>;
     }
 }