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
Comments
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. |
Off-topic, but .. 😮 you can use icons in the nav? Is that documented somewhere? Couldn't find it. |
@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. |
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. |
Makes sense, we could add it under the usage guide. |
One last thing – your code sample isn't working, must be |
Also, it won't work if the nav is collapsed at page load, because It's a little trickier than I thought ... |
Here's a video of the new ellipsis behavior that is landing next week in Insiders: Ohne.Titel.mp4All 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 This replaces the ugly native tooltips that are not very user friendly: |
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. |
Contribution guidelines
I want to suggest an idea and checked that ...
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:
Basically, I can see two solutions for this:
title
attribute to all nav items. This can easily be done by modifying thenav-item
partial. However, this creates a lot of redundancy, especially on large doc projects with huge navs.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.)Use Cases
See description.
Screenshots / Mockups
No response
The text was updated successfully, but these errors were encountered: