Tooltips for masthead links

[maazadeeb]

Fixes #1377

[mmistakes]

Shouldn't this be something more like?

<li class="masthead__menu-item">
  <a href="{{ domain }}{{ link.url }}" {% if link.description %}title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
</li>

What you have is somewhat redundant and doesn't really produce HTML that would give the link more context since you're just duping link.title for the anchor name and title attribute`.

For example say you have this:

main:
  - title: "My Masthead Link"
    url: http://whatever.com

You're going to get this...

<li class="masthead__menu-item" title="My Masthead Link">
  <a href="http://whatever.com">My Masthead Link</a>
</li>

Which is kind of pointless since it doesn't add any additional context to the link.

https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/

If you use my code:

main:
  - title: "My Masthead Link"
    description: "An awesome website about whatever"
    url: http://whatever.com

You'd get this:

<li class="masthead__menu-item">
  <a href="http://whatever.com" title="An awesome website about whatever">My Masthead Link</a>
</li>

Which I think is better for the user.

[maazadeeb]

I added the title attribute on the wrong tag. I meant to add it to the anchor tag actually. Will change it.

I suggested about using a separate key tooltip in the _navigation.yml in the issue, but you suggested that it won't add value. I think I misunderstood maybe? Do you think a key called description would make more sense? I'd be happy to add it if so 😄

[mmistakes]

I was referring to how you were setting a default value for title. That is unnecessary as title is already the link name.

description seems more semantic to me. The hover effect isn't really a "tooltip", just something browser's do. Not to mention it means nothing for mobile users since you can hover a link.

[maazadeeb]

Fair enough. I've updated my commit. I've updated the docs as well.

[mmistakes]

Looks good, thanks @maaz93.