Tooltips for masthead links (mmistakes#1380)

Author: maazadeeb

_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">

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}