Skip to content
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

Feature suggestion: Show title on mouseover on overflowing nav items #3785

Closed
4 tasks done
wilhelmer opened this issue Mar 31, 2022 · 10 comments
Closed
4 tasks done

Feature suggestion: Show title on mouseover on overflowing nav items #3785

wilhelmer opened this issue Mar 31, 2022 · 10 comments

Comments

@wilhelmer
Copy link
Sponsor Contributor

@wilhelmer wilhelmer commented Mar 31, 2022

Contribution guidelines

I want to suggest an idea and checked that ...

  • ... to my best knowledge, my idea wouldn't break something for other users
  • ... the documentation does not mention anything about my idea
  • ... there are no open or closed issues that are related to my idea

Description

If a nav item has a very long title, the title is truncated with ellipsis, which is good to prevent the nav from scrolling horizontally. (This may be Insiders only, not sure.)

However, it would be nice if users could see the full title on mouseover, like this:

2022-03-31_15-58-52

Basically, I can see two solutions for this:

  1. Add a title attribute to all nav items. This can easily be done by modifying the nav-item partial. However, this creates a lot of redundancy, especially on large doc projects with huge navs.
  2. Add a title attribute to overflowing nav items only. This can be done using JS. See code below. (Yes, it's jQuery! Heresy! But to get an idea.)
// Add title to overflowing nav links
$(".md-ellipsis").each(function () {
    if (this.offsetWidth < this.scrollWidth) {
        $(this).attr("title", $(this).text().trim());
    }
});

Use Cases

See description.

Screenshots / Mockups

No response

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 6, 2022

Thanks for suggesting! As a general note, I'm working on better hover behavior for elements with titles (including abbreviations specifically), and fixing this issue will be a part of it. It might take some time, but the logic is the same, so it wouldn't make sense to solve this specifically.

In the mean time, the following script should mitigate the issue (adapted from your code example to remove jQuery):

document$.subscribe(() => {
  document.querySelectorAll(".md-ellipsis").forEach(el => {
    if (this.offsetWidth < this.scrollWidth) {
      el.setAttribute("title", el.innerText)
    }
  })
})

Note that will only work in Insiders, since it makes use of the refactoring of the navigation structure to support icons.

@wilhelmer
Copy link
Sponsor Contributor Author

@wilhelmer wilhelmer commented Apr 6, 2022

Note that will only work in Insiders, since it makes use of the refactoring of the navigation structure to support icons.

Off-topic, but .. 😮 you can use icons in the nav? Is that documented somewhere? Couldn't find it.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 6, 2022

@wilhelmer jup, they're called page icons, since they are set per page. If you click the link and look to the left, you'll see the navigation making use of it 😊 This was added in insiders-4.5.0.

@wilhelmer
Copy link
Sponsor Contributor Author

@wilhelmer wilhelmer commented Apr 6, 2022

This is awesome. Please consider linking to it from the "Icons, Emojis" page. It's not prominent enough in search, probably because it's a h3 section.

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 6, 2022

Makes sense, we could add it under the usage guide.

@wilhelmer
Copy link
Sponsor Contributor Author

@wilhelmer wilhelmer commented Apr 6, 2022

One last thing – your code sample isn't working, must be el instead of this: el.offsetWidth < el.scrollWidth.

@wilhelmer
Copy link
Sponsor Contributor Author

@wilhelmer wilhelmer commented Apr 6, 2022

Also, it won't work if the nav is collapsed at page load, because offsetWidth and scollWidth of all collapsed entries is 0 then.

It's a little trickier than I thought ...

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented May 8, 2022

Here's a video of the new ellipsis behavior that is landing next week in Insiders:

Ohne.Titel.mp4

All elements that have ellipsis will now show a small tooltip when they overflow. The video shows that this is also the case for the header title that wraps on scroll. Additionally, content elements that have a title attribute can be opted into this new behavior as well by enabling the new content.tooltips flag:

Bildschirmfoto 2022-05-08 um 14 15 32

This replaces the ugly native tooltips that are not very user friendly:

Bildschirmfoto 2022-05-08 um 14 16 48

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented May 8, 2022

Addendum: of course, it will also apply to the table of contents:

Bildschirmfoto 2022-05-08 um 14 22 38

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented May 8, 2022

Insiders 4.15.0 was just released and comes with improved support for tooltips 🎉 This release also includes the behavior mentioned above, automatically adding a tooltip to overflowing navigation titles.

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

No branches or pull requests

2 participants