From 6343a0d621736cd1ec23986ef9fa185017ec3251 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 16:01:43 -0300
Subject: [PATCH] Adding tooltip to badges too

---
 .../src/components/Comment.css                |  1 +
 .../client/components/Tag.css                 | 22 ++++++++
 .../client/components/Tag.js                  | 51 +++++++++++++++----
 .../client/components/Tooltip.js              |  5 +-
 4 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index 7eb2ece71..713655914 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -16,6 +16,7 @@
 }
 
 .comment {
+  position: relative;
   padding-left: 15px;
 }
 
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css
index 8874bfa0c..88a019b5d 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tag.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js
index 8e1cb428d..b7ee8cd6b 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tag.js
+++ b/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>
+    );
+  }
+}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
index c57336d05..f98d4c0d5 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
+++ b/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')}: