add tooltip

2 files changed, 26 insertions, 0 deletions

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index cda0b19..f569134 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -324,4 +324,28 @@ body.no-input #week-selector {
   body.no-input #search input:-ms-input-placeholder {
     color: #757575;
   }
+}
+
+.tooltip {
+  display: none;
+}
+
+body.no-input .tooltip {
+  display: block;
+  position: absolute;
+  background-color: white;
+  padding: 15px;
+  margin: 32px 8px;
+  border-radius: 2px;
+}
+
+body.no-input .tooltip::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  background-color: white;
+  top: -12px;
+  position: absolute;
+  transform: rotate(45deg);
+  z-index: -1;
 }
\ No newline at end of file
diff --git a/views/index.jade b/views/index.jade
index dc4a5d6..6d2aa17 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -16,6 +16,8 @@ block content
       .input-wrapper
         input(type='search', placeholder='Zoeken')
         button.material-icons.fav(tabindex='0', type='button') 
+      .tooltip
+        span Voer hier een <strong>docenten afkorting</strong>, <strong>klas</strong>, <strong>leerlingen nummer</strong> of <strong>lokaal nummer</strong> in.
       button#overflow-button(type='button')
         i.material-icons &#xE5D4;