Translations and style

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

@@ -5,6 +5,6 @@
   margin-left: 5px;
 }
 
-/* .infoIcon:hover {
+ .infoIcon.on {
   color: #1d5294;
-} */
+} 

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

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

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

@@ -11,8 +11,8 @@ export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) =>
       onMouseLeave={props.hideTooltip} >
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon /> 
+      <InfoIcon tooltip={tooltip} /> 
       {tooltip && <Tooltip />} 
     </span>
   );
-};
+};

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import {Icon} from 'plugin-api/beta/client/components/ui';
 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}>
     <Icon name="info_outline" className={styles.icon} />
-    <h3 className={styles.headline}>Featured Comments:</h3>
+    <h3 className={styles.headline}>
+      {t('talk-plugin-featured-comments.featured_comments')}:
+    </h3>
     <p className={styles.description}>
-      Comments selected by our team as worth reading
+      {t('talk-plugin-featured-comments.tooltip_description')}
     </p>
   </div>
 );