Info Icon, and Tooltip

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

@@ -3,12 +3,8 @@
   /* TODO: figure out the best location to include the `reset.css` */
   composes: buttonReset from "coral-framework/styles/reset.css";
 
-  color: #2a2a2a;
-  margin-right: 10px;
-}
-
-.button {
   color: #767676;
+  margin-right: 10px;
 }
 
 .button.featured {

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

@@ -0,0 +1,10 @@
+.infoIcon {
+  color: #616161;
+  vertical-align: middle;
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+/* .infoIcon:hover {
+  color: #1d5294;
+} */

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './InfoIcon.css';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default () => (
+  <Icon 
+    name="info_outline"
+    className={styles.infoIcon}
+  />
+);

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

@@ -1,9 +1,18 @@
 import React from 'react';
 import {TabCount} from 'plugin-api/beta/client/components/ui';
+import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
+import Tooltip from '../containers/Tooltip';
 
-export default ({active, asset: {featuredCommentsCount}}) => (
-  <span>
-    {t('talk-plugin-featured-comments.featured')} <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-  </span>
-);
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+  return (
+    <span 
+      onMouseEnter={props.showTooltip}
+      onMouseLeave={props.hideTooltip} >
+      {t('talk-plugin-featured-comments.featured')}
+      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <InfoIcon /> 
+       {tooltip && <Tooltip />} 
+    </span>
+  );
+};

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

@@ -0,0 +1,64 @@
+.tooltip {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 26px;
+  left: 50px;
+  width: 200px;
+  text-align: left;
+  color: #616161;
+}
+
+.tooltip::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 46px;
+  top: -21px;
+  transform: rotate(180deg);
+}
+
+.tooltip::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 46px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.headline {
+  color: #484747;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-size: 1.02em;
+  margin-left: 6px;
+  letter-spacing: 0.2px;
+  vertical-align: middle;
+  margin-bottom: 2px;
+  line-height: 22px;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}
+
+.description {
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+  padding-left: 25px;
+  font-weight: 400;
+  font-size: 1em;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import styles from './Tooltip.css';
+
+export default class Tooltip extends React.Component {
+  render() {
+    return (
+      <div className={styles.tooltip}>
+        <Icon name="info_outline" className={styles.icon} />
+        <h3 className={styles.headline}>Featured Comments:</h3>
+        <p className={styles.description}>
+          Comments selected by our team as worth reading
+        </p>
+      </div>
+    );
+  }
+}