New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips for masthead links #1380

Merged
merged 1 commit into from Dec 4, 2017

Conversation

Projects
None yet
2 participants
@maaz93
Contributor

maaz93 commented Dec 3, 2017

Fixes #1377

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 3, 2017

Owner

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.

Owner

mmistakes commented Dec 3, 2017

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.

@maaz93

This comment has been minimized.

Show comment
Hide comment
@maaz93

maaz93 Dec 3, 2017

Contributor

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 😄

Contributor

maaz93 commented Dec 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 3, 2017

Owner

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.

Owner

mmistakes commented Dec 3, 2017

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.

@maaz93

This comment has been minimized.

Show comment
Hide comment
@maaz93

maaz93 Dec 4, 2017

Contributor

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

Contributor

maaz93 commented Dec 4, 2017

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 4, 2017

Owner

Looks good, thanks @maaz93.

Owner

mmistakes commented Dec 4, 2017

Looks good, thanks @maaz93.

@mmistakes mmistakes merged commit 634d288 into mmistakes:master Dec 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment