Merge branch 'master' into long-title

client/coral-embed-stream/src/components/Comment.css

@@ -16,6 +16,7 @@
 }
 
 .comment {
+  position: relative;
   padding-left: 15px;
 }
 

plugins/talk-plugin-featured-comments/client/components/Tag.css

@@ -17,4 +17,26 @@
   margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
+}
+
+.tag.on {
+  background-color: #1862a7;
+  cursor: pointer;
+}
+
+.tooltip {
+  top: 36px;
+  left: auto;
+  right: 10px;
+}
+
+.tooltip::before{
+  left: auto;
+  right: 16px;
+}
+
+.tooltip::after{
+  left: auto;
+  right: 16px;
+  top: -20px;
 }

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -1,16 +1,45 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './Tag.css';
+import Tooltip from './Tooltip';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
 
-export default (props) => (
-  <span>
-    {
-      isTagged(props.comment.tags, 'FEATURED') ? (
-        <span className={styles.tag}>
-          {t('talk-plugin-featured-comments.featured')}
-        </span>
-      ) : null
-    }
-  </span>
-);
+export default class Tag extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      tooltip: false
+    };
+
+  }
+
+  showTooltip = () => {
+    this.setState({
+      tooltip: true
+    });
+  }
+
+  hideTooltip = () => {
+    this.setState({
+      tooltip: false
+    });
+  }
+
+  render() {
+    const {tooltip} = this.state;
+    return(
+      <div onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} >
+          {
+            isTagged(this.props.comment.tags, 'FEATURED') ? (
+              <span className={cn(styles.tag, {[styles.on]: tooltip})}>
+                {t('talk-plugin-featured-comments.featured')}
+              </span>
+            ) : null
+          }
+        {tooltip && <Tooltip className={styles.tooltip} />}
+      </div>
+    );
+  }
+}

plugins/talk-plugin-featured-comments/client/components/Tooltip.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './Tooltip.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default () => (
-  <div className={styles.tooltip}>
+export default ({className = ''}) => (
+  <div className={cn(styles.tooltip, className)}>
     <Icon name="info_outline" className={styles.icon} />
     <h3 className={styles.headline}>
       {t('talk-plugin-featured-comments.featured_comments')}: