From c18a67547eaa74e83d9a09fa3163459eca851fe1 Mon Sep 17 00:00:00 2001
From: Andrea Cardaci <cyrus.and@gmail.com>
Date: Tue, 9 Oct 2018 15:12:34 +0200
Subject: [PATCH] Add tooltips for functions in home

---
 _includes/bin_table.html |  2 +-
 assets/style.scss        | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/_includes/bin_table.html b/_includes/bin_table.html
index ec4b740..78e1a56 100644
--- a/_includes/bin_table.html
+++ b/_includes/bin_table.html
@@ -3,7 +3,7 @@
         {% for function_pair in site.data.functions %}
         {% assign function_id = function_pair[0] %}
         {% assign function = function_pair[1] %}
-        <li><a href="#+{{ function.label | downcase }}">{{ function.label }}</a></li>
+        <li><a href="#+{{ function.label | downcase }}" data-title="{{ function.description | replace: '\n', ' ' }}">{{ function.label }}</a></li>
         {% endfor %}
     </ul>
 
diff --git a/assets/style.scss b/assets/style.scss
index 50f7347..c4aaa5b 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -91,9 +91,27 @@ h2, h3, h4, h5, h5 {
 #bin-search-wrapper {
     margin: 50px 0;
     padding: 10px 0;
+     position: relative; // XXX needed for tooltip sizing
 
     #bin-search-filters {
         text-align: center;
+
+        a:hover:before {
+            content: attr(data-title);
+            display: block;
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin-top: 1.75em; // XXX below the button
+            margin-left: 10%;
+            margin-right: 10%;
+            padding: 1em;
+            border-radius: 1em;
+            color: $lighter;
+            background: rgba(0, 0, 0, 0.75);
+            z-index: 1;
+            pointer-events: none;
+        }
     }
 
     #bin-search {