From 634d2884a20f974062cb9cb75c35daa7ea53f890 Mon Sep 17 00:00:00 2001
From: Maaz Syed Adeeb <maaz.adeeb@gmail.com>
Date: Tue, 5 Dec 2017 01:14:39 +0530
Subject: [PATCH] Tooltips for masthead links (#1380)

---
 _includes/masthead.html     | 4 +++-
 docs/_docs/07-navigation.md | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/_includes/masthead.html b/_includes/masthead.html
index 4b516c4d..81c6404d 100644
--- a/_includes/masthead.html
+++ b/_includes/masthead.html
@@ -10,7 +10,9 @@
             {% else %}
               {% assign domain = site.url | append: site.baseurl %}
             {% endif %}
-            <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
+            <li class="masthead__menu-item">
+              <a href="{{ domain }}{{ link.url }}" {% if link.description %} title="{{ link.description }}" {% endif %}>{{ link.title }}</a>
+            </li>
           {% endfor %}
         </ul>
         <button type="button">
diff --git a/docs/_docs/07-navigation.md b/docs/_docs/07-navigation.md
index 6679e07c..bd786088 100644
--- a/docs/_docs/07-navigation.md
+++ b/docs/_docs/07-navigation.md
@@ -34,6 +34,8 @@ Which will give you a responsive masthead similar to this:
 
 ![priority plus masthead animation]({{ "/assets/images/mm-priority-plus-masthead.gif" | absolute_url }})
 
+Optionally, you can add a `description` key per title in the `main` key. This `description` will show up like a tooltip, when the user hovers over the link on a desktop browser.
+
 **ProTip:** Put the most important links first so they're always visible and not hidden behind the **menu toggle**.
 {: .notice--info}