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}