diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css
index 11e35d40b..daaa329c9 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Button.css
+++ b/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 {
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
new file mode 100644
index 000000000..37b942964
--- /dev/null
+++ b/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;
+} */
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
new file mode 100644
index 000000000..4c24992b6
--- /dev/null
+++ b/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 () => (
+
+);
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index c780887c6..6e4a2d382 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/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}}) => (
-
- {t('talk-plugin-featured-comments.featured')} {featuredCommentsCount}
-
-);
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => {
+ return (
+
+ {t('talk-plugin-featured-comments.featured')}
+ {featuredCommentsCount}
+
+ {tooltip && }
+
+ );
+};
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.css b/plugins/talk-plugin-featured-comments/client/components/Tooltip.css
new file mode 100644
index 000000000..98eb50b46
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
new file mode 100644
index 000000000..a45ee118b
--- /dev/null
+++ b/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 (
+
+
+
Featured Comments:
+
+ Comments selected by our team as worth reading
+
+
+ );
+ }
+}