diff --git a/src/components/elements/IconLabel.js b/src/components/elements/IconLabel.js
index 4f4772f..ead2b1d 100644
--- a/src/components/elements/IconLabel.js
+++ b/src/components/elements/IconLabel.js
@@ -1,16 +1,86 @@
import React from "react";
import {FlexRow, Svg} from "../../utils/containers";
-import {Medium} from "../../utils/fonts";
+import {Body, Medium} from "../../utils/fonts";
+import metricIco from '../../assets/metric_ico.svg';
+import coinsIco from '../../assets/coins_ico.svg';
+import baselineIco from '../../assets/baseline_ico.svg';
+import clockIco from '../../assets/clock_ico.svg';
+import cupIco from '../../assets/cup_ico.svg';
+import styled from "styled-components";
+
+const HoverLabel = styled(Body)`
+ position: absolute;
+ top: -32px;
+ left: 0;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px;
+ padding: 4px 12px;
+ background-color: ${({theme}) => theme.colors.green};
+ color: ${({theme}) => theme.colors.white};
+`;
+
+const renderHoverLabel = (type) => {
+ switch (type) {
+ case 'metric':
+ return
+ metric
+ ;
+ case 'prize':
+ return
+ prize
+ ;
+ case 'baseline':
+ return
+ baseline
+ ;
+ case 'timeLeft':
+ return
+ time left
+ ;
+ case 'bestScore':
+ return
+ best score
+ ;
+ }
+}
+
+const renderIco = (type) => {
+ switch (type) {
+ case 'metric':
+ return metricIco;
+ case 'prize':
+ return coinsIco;
+ case 'baseline':
+ return baselineIco;
+ case 'timeLeft':
+ return clockIco;
+ case 'bestScore':
+ return cupIco;
+ }
+}
+
+const IconLabelStyle = styled(FlexRow)`
+ position: relative;
+
+ &:hover {
+ .HoverLabel {
+ display: flex;
+ }
+ }
+`
const IconLabel = (props) => {
return (
-
+
+ {renderHoverLabel(props.type)}
+
);
}
diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js
index f6adbc0..b441d33 100644
--- a/src/components/elements/MiniChallenge.js
+++ b/src/components/elements/MiniChallenge.js
@@ -3,11 +3,6 @@ import {Container, FlexColumn, FlexRow, Grid, Svg} from "../../utils/containers"
import {Body, H3} from "../../utils/fonts";
import styled from "styled-components";
import IconLabel from "./IconLabel";
-import metricIco from '../../assets/metric_ico.svg';
-import coinsIco from '../../assets/coins_ico.svg';
-import baselineIco from '../../assets/baseline_ico.svg';
-import clockIco from '../../assets/clock_ico.svg';
-import cupIco from '../../assets/cup_ico.svg';
const ChallengeStyle = styled(FlexColumn)`
padding: 12px;
@@ -60,19 +55,19 @@ const MiniChallenge = (props) => {
{props.describe}